Add tooltips for room buttons

2021-11-24 13:33:32 -08:00
parent f0d5977e88
commit baa7d4869c
2 changed files with 34 additions and 0 deletions
--- a/src/RoomButton.module.css
+++ b/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;
+}