From 8c2aa9a14356c04f99db3dc335a74fe614ecac98 Mon Sep 17 00:00:00 2001
From: Syed Hussain Ather <shussainather@gmail.com>
Date: Thu, 4 Jun 2026 22:58:28 -0400
Subject: [PATCH] Add tooltips to user profile controls

---
 .../room/UserProfileSidebar.js                | 153 ++++++++++++------
 1 file changed, 104 insertions(+), 49 deletions(-)

diff --git a/src/react-components/room/UserProfileSidebar.js b/src/react-components/room/UserProfileSidebar.js
index b98062553a..c31764c950 100644
--- a/src/react-components/room/UserProfileSidebar.js
+++ b/src/react-components/room/UserProfileSidebar.js
@@ -9,6 +9,7 @@ import styles from "./UserProfileSidebar.scss";
 import { FormattedMessage, useIntl } from "react-intl";
 import { Slider } from "../input/Slider";
 import { ToolbarButton } from "../input/ToolbarButton";
+import { ToolTip } from "@mozilla/lilypad-ui";
 import { ReactComponent as VolumeHigh } from "../icons/VolumeHigh.svg";
 import { ReactComponent as VolumeMuted } from "../icons/VolumeMuted.svg";
 import useAvatarVolume from "./hooks/useAvatarVolume";
@@ -64,47 +65,74 @@ export function UserProfileSidebar({
         <div className={styles.avatarPreviewContainer}>{avatarPreview || <div />}</div>
         {hasMicPresence && (
           <div className={styles.sliderContainer}>
-            <ToolbarButton
-              icon={isNetworkMuted || isMuted ? <VolumeMuted /> : <VolumeHigh />}
-              selected={isNetworkMuted || isMuted}
-              preset="accent4"
-              style={{ display: "block" }}
-              onClick={() => {
-                updateMuted(!isMuted);
-              }}
-              disabled={isNetworkMuted}
-            />
-            <Slider
-              min={MIN}
-              max={MAX}
-              step={1}
-              value={newLevel}
-              onChange={onLevelChanged}
-              className={styles.sliderInputContainer}
-              disabled={isNetworkMuted || isMuted}
-            />
+            <ToolTip
+              location="bottom"
+              description={intl.formatMessage({
+                id: "user-profile-sidebar.local-mute-tooltip",
+                defaultMessage: "Mute this person only for you"
+              })}
+            >
+              <ToolbarButton
+                icon={isNetworkMuted || isMuted ? <VolumeMuted /> : <VolumeHigh />}
+                selected={isNetworkMuted || isMuted}
+                preset="accent4"
+                style={{ display: "block" }}
+                onClick={() => {
+                  updateMuted(!isMuted);
+                }}
+                disabled={isNetworkMuted}
+              />
+            </ToolTip>
+
+            <ToolTip
+              location="bottom"
+              description={intl.formatMessage({
+                id: "user-profile-sidebar.volume-tooltip",
+                defaultMessage: "Adjust this person's volume"
+              })}
+            >
+              <Slider
+                min={MIN}
+                max={MAX}
+                step={1}
+                value={newLevel}
+                onChange={onLevelChanged}
+                className={styles.sliderInputContainer}
+                disabled={isNetworkMuted || isMuted}
+              />
+            </ToolTip>
           </div>
         )}
+
         {canPromote && (
-          <Button
-            preset="accept"
-            disabled={!isSignedIn}
-            title={
-              isSignedIn
-                ? intl.formatMessage({ id: "user-profile-sidebar.promote-button", defaultMessage: "Promote" })
-                : intl.formatMessage(
-                    {
-                      id: "user-profile-sidebar.promote-button-disabled-label",
-                      defaultMessage: "{displayName} is signed out."
-                    },
-                    { displayName }
-                  )
-            }
-            onClick={onPromote}
+          <ToolTip
+            location="bottom"
+            description={intl.formatMessage({
+              id: "user-profile-sidebar.promote-tooltip",
+              defaultMessage: "Make this person a room moderator"
+            })}
           >
-            <FormattedMessage id="user-profile-sidebar.promote-button" defaultMessage="Promote" />
-          </Button>
+            <Button
+              preset="accept"
+              disabled={!isSignedIn}
+              title={
+                isSignedIn
+                  ? intl.formatMessage({ id: "user-profile-sidebar.promote-button", defaultMessage: "Promote" })
+                  : intl.formatMessage(
+                      {
+                        id: "user-profile-sidebar.promote-button-disabled-label",
+                        defaultMessage: "{displayName} is signed out."
+                      },
+                      { displayName }
+                    )
+              }
+              onClick={onPromote}
+            >
+              <FormattedMessage id="user-profile-sidebar.promote-button" defaultMessage="Promote" />
+            </Button>
+          </ToolTip>
         )}
+
         {canDemote && (
           <Button
             preset="cancel"
@@ -125,22 +153,49 @@ export function UserProfileSidebar({
             <FormattedMessage id="user-profile-sidebar.demote-button" defaultMessage="Demote" />
           </Button>
         )}
-        <Button onClick={onToggleHidden}>
-          {isHidden ? (
-            <FormattedMessage id="user-profile-sidebar.unhide-button" defaultMessage="Unhide" />
-          ) : (
-            <FormattedMessage id="user-profile-sidebar.hide-button" defaultMessage="Hide" />
-          )}
-        </Button>
-        {canMute && (
-          <Button preset="cancel" onClick={onMute}>
-            <FormattedMessage id="user-profile-sidebar.mute-button" defaultMessage="Mute" />
+
+        <ToolTip
+          location="bottom"
+          description={intl.formatMessage({
+            id: "user-profile-sidebar.hide-tooltip",
+            defaultMessage: "Hide your avatar from this person until you leave the room"
+          })}
+        >
+          <Button onClick={onToggleHidden}>
+            {isHidden ? (
+              <FormattedMessage id="user-profile-sidebar.unhide-button" defaultMessage="Unhide" />
+            ) : (
+              <FormattedMessage id="user-profile-sidebar.hide-button" defaultMessage="Hide" />
+            )}
           </Button>
+        </ToolTip>
+
+        {canMute && (
+          <ToolTip
+            location="bottom"
+            description={intl.formatMessage({
+              id: "user-profile-sidebar.mute-tooltip",
+              defaultMessage: "Mute this person for everyone"
+            })}
+          >
+            <Button preset="cancel" onClick={onMute}>
+              <FormattedMessage id="user-profile-sidebar.mute-button" defaultMessage="Mute" />
+            </Button>
+          </ToolTip>
         )}
+
         {canKick && (
-          <Button preset="cancel" onClick={onKick}>
-            <FormattedMessage id="user-profile-sidebar.kick-button" defaultMessage="Kick" />
-          </Button>
+          <ToolTip
+            location="bottom"
+            description={intl.formatMessage({
+              id: "user-profile-sidebar.kick-tooltip",
+              defaultMessage: "Remove this person from the room"
+            })}
+          >
+            <Button preset="cancel" onClick={onKick}>
+              <FormattedMessage id="user-profile-sidebar.kick-button" defaultMessage="Kick" />
+            </Button>
+          </ToolTip>
         )}
       </Column>
     </Sidebar>