Add tooltips to header buttons

src/RoomButton.jsx

@@ -137,6 +137,7 @@ export function HeaderButton({ on, className, children, ...rest }) {
 export function SettingsButton(props) {
   return (
     <HeaderButton {...props}>
+      <ButtonTooltip>Show Dev Tools</ButtonTooltip>
       <SettingsIcon width={20} height={20} />
     </HeaderButton>
   );
@@ -145,6 +146,7 @@ export function SettingsButton(props) {
 export function LayoutToggleButton({ layout, ...rest }) {
   return (
     <HeaderButton {...rest}>
+      <ButtonTooltip className={styles.bottomRight}>Layout Type</ButtonTooltip>
       {layout === "spotlight" ? (
         <SpotlightIcon width={24} height={24} />
       ) : (
@@ -154,6 +156,10 @@ export function LayoutToggleButton({ layout, ...rest }) {
   );
 }
 
-export function ButtonTooltip({ children }) {
+export function ButtonTooltip({ className, children }) {
-  return <div className={styles.buttonTooltip}>{children}</div>;
+  return (
+    <div className={classNames(styles.buttonTooltip, className)}>
+      {children}
+    </div>
+  );
 }

src/RoomButton.module.css

@@ -123,7 +123,6 @@ limitations under the License.
   display: none;
   background-color: var(--bgColor2);
   position: absolute;
-  bottom: calc(100% + 6px);
   flex-direction: row;
   justify-content: center;
   align-items: center;
@@ -132,8 +131,19 @@ limitations under the License.
   border-radius: 8px;
   max-width: 135px;
   width: max-content;
+  z-index: 1;
+}
+
+.buttonTooltip.bottomRight {
+  right: 0;
 }
 
 .roomButton:hover .buttonTooltip {
   display: flex;
+  bottom: calc(100% + 6px);
+}
+
+.headerButton:hover .buttonTooltip {
+  display: flex;
+  top: calc(100% + 6px);
 }