Add tooltips for room buttons

src/RoomButton.jsx

@@ -75,6 +75,9 @@ export function DropdownButton({ onChange, options, value, children }) {
 export function MicButton({ muted, ...rest }) {
   return (
     <RoomButton {...rest} on={muted}>
+      <ButtonTooltip>
+        {muted ? "Unmute microphone" : "Mute microphone"}
+      </ButtonTooltip>
       {muted ? <MuteMicIcon /> : <MicIcon />}
     </RoomButton>
   );
@@ -83,6 +86,9 @@ export function MicButton({ muted, ...rest }) {
 export function VideoButton({ enabled, ...rest }) {
   return (
     <RoomButton {...rest} on={enabled}>
+      <ButtonTooltip>
+        {enabled ? "Turn off camera" : "Turn on camera"}
+      </ButtonTooltip>
       {enabled ? <DisableVideoIcon /> : <VideoIcon />}
     </RoomButton>
   );
@@ -95,6 +101,9 @@ export function ScreenshareButton({ enabled, className, ...rest }) {
       {...rest}
       on={enabled}
     >
+      <ButtonTooltip>
+        {enabled ? "Stop sharing screen" : "Share screen"}
+      </ButtonTooltip>
       <ScreenshareIcon />
     </RoomButton>
   );
@@ -106,6 +115,7 @@ export function HangupButton({ className, ...rest }) {
       className={classNames(styles.hangupButton, className)}
       {...rest}
     >
+      <ButtonTooltip>Leave</ButtonTooltip>
       <HangupIcon />
     </RoomButton>
   );
@@ -143,3 +153,7 @@ export function LayoutToggleButton({ layout, ...rest }) {
     </HeaderButton>
   );
 }
+
+export function ButtonTooltip({ children }) {
+  return <div className={styles.buttonTooltip}>{children}</div>;
+}

src/RoomButton.module.css

@@ -17,6 +17,7 @@ limitations under the License.
 .roomButton,
 .headerButton,
 .dropdownButton {
+  position: relative;
   display: flex;
   justify-content: center;
   align-items: center;
@@ -117,3 +118,22 @@ limitations under the License.
 .dropdownActiveItem {
   color: #0dbd8b;
 }
+
+.buttonTooltip {
+  display: none;
+  background-color: var(--bgColor2);
+  position: absolute;
+  bottom: calc(100% + 6px);
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+  padding: 8px 10px;
+  color: var(--textColor1);
+  border-radius: 8px;
+  max-width: 135px;
+  width: max-content;
+}
+
+.roomButton:hover .buttonTooltip {
+  display: flex;
+}