Fix tooltip behaviors on click/focus

2021-12-14 22:00:00 -08:00
parent 38eb5e7c2e
commit 3157cf65ef
8 changed files with 204 additions and 43 deletions
--- a/src/Tooltip.module.css
+++ b/src/Tooltip.module.css
@@ -0,0 +1,32 @@
+.tooltip {
+  background-color: var(--bgColor2);
+  position: absolute;
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+  padding: 8px 10px;
+  color: var(--textColor1);
+  border-radius: 8px;
+  max-width: 135px;
+  width: max-content;
+  z-index: 1;
+  left: 50%;
+  transform: translateX(-50%);
+}
+
+.tooltip.top {
+  bottom: calc(100% + 6px);
+}
+
+.tooltip.bottom {
+  top: calc(100% + 6px);
+}
+
+.tooltip.bottomLeft {
+  top: calc(100% + 6px);
+  left: -25%;
+}
+
+.tooltipContainer {
+  position: relative;
+}