[ui] add pointer to tooltip

uwu · Mar 7, 2024 · e6d0102 · e6d0102
1 parent a6e66d6
commit e6d0102
Show file tree

Hide file tree

Showing 2 changed files with 24 additions and 2 deletions.
diff --git a/packages/shelter-ui/src/tooltip.tsx b/packages/shelter-ui/src/tooltip.tsx
@@ -12,6 +12,8 @@ declare module "solid-js" {
   }
 }
 
+const verticalOffset = 8;
+
 const ToolTip: Component<{
   left: number;
   top: number;
@@ -37,11 +39,12 @@ const ToolTip: Component<{
       }}
       style={{
         left: props.left + props.width / 2 - tooltipWidth() / 2 + "px",
-        top: props.under ? props.bottom + "px" : undefined,
-        bottom: !props.under ? window.innerHeight - props.top + "px" : undefined,
+        top: props.under ? props.bottom + verticalOffset + "px" : undefined,
+        bottom: !props.under ? window.innerHeight - props.top + verticalOffset + "px" : undefined,
         "transform-origin": `50% ${props.under ? 0 : 100}%`,
       }}
     >
+      <div class={`${classes.pointer} ${props.under ? classes.under : ""}`} />
       <div class={classes.content}>{props.children}</div>
     </div>
   );

diff --git a/packages/shelter-ui/src/tooltip.tsx.scss b/packages/shelter-ui/src/tooltip.tsx.scss
@@ -20,6 +20,25 @@
   }
 }
 
+.pointer {
+  position: absolute;
+  width: 0;
+  height: 0;
+  left: 50%;
+
+  border: 5px solid transparent;
+  border-top-color: var(--background-floating);
+
+  margin-left: -5px;
+  top: 100%;
+
+  &.under {
+    transform: rotate(180deg);
+    bottom: 100%;
+    top: unset;
+  }
+}
+
 .content {
   padding: 8px 12px;
   overflow: hidden;