From 4588cca2b86147870cbedf8e732ec95cf3a4a8c0 Mon Sep 17 00:00:00 2001
From: Robert Long <robert@robertlong.me>
Date: Wed, 24 Nov 2021 15:05:43 -0800
Subject: [PATCH] Add tooltips to header buttons

---
 src/RoomButton.jsx        | 10 ++++++++--
 src/RoomButton.module.css | 12 +++++++++++-
 2 files changed, 19 insertions(+), 3 deletions(-)

diff --git a/src/RoomButton.jsx b/src/RoomButton.jsx
index ee678bb..a89b2da 100644
--- a/src/RoomButton.jsx
+++ b/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 }) {
-  return <div className={styles.buttonTooltip}>{children}</div>;
+export function ButtonTooltip({ className, children }) {
+  return (
+    <div className={classNames(styles.buttonTooltip, className)}>
+      {children}
+    </div>
+  );
 }
diff --git a/src/RoomButton.module.css b/src/RoomButton.module.css
index 15818db..49ac089 100644
--- a/src/RoomButton.module.css
+++ b/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);
 }