@rogieking/figui3 1.8.8 → 1.8.9

package/components.css

@@ -875,7 +875,7 @@ fig-button {
     *[fill] {
       fill: currentColor;
     }
-    *[stroke][stroke!="none"] {
+    *[stroke]:not([stroke="none"]) {
       stroke: currentColor;
     }
   }
@@ -2085,7 +2085,7 @@ fig-popover {
     height: 6px;
     position: absolute;
     top: calc(100% - 1px);
-    left: 50%;
+    left: var(--beak-offset, 50%);
     z-index: 2;
     transform: translate(-50%);
   }
@@ -2093,6 +2093,7 @@ fig-popover {
   &[position="bottom"] {
     &:after {
       top: 1px;
+      left: var(--beak-offset, 50%);
       transform: translate(-50%, -100%) scaleY(-1);
     }
   }
@@ -2116,7 +2117,7 @@ fig-popover {
     height: 6px;
     position: absolute;
     top: calc(100% - 1px);
-    left: 50%;
+    left: var(--beak-offset, 50%);
     z-index: 2;
     transform: translate(-50%);
   }
@@ -2124,6 +2125,7 @@ fig-popover {
   &[position="bottom"] {
     &:after {
       top: 1px;
+      left: var(--beak-offset, 50%);
       transform: translate(-50%, -100%) scaleY(-1);
     }
   }

package/example.html

@@ -91,6 +91,12 @@
 
 
         <hstack>
+            <fig-tooltip text="Tooltip that is very very long"
+                         delay="0">
+                <fig-button>
+                    T
+                </fig-button>
+            </fig-tooltip>
             <fig-tooltip text="Tooltip"
                          delay="0">
                 <fig-button>

package/fig.js

@@ -383,6 +383,14 @@ class FigTooltip extends HTMLElement {
       left = window.innerWidth - popupRect.width - offset.right;
     }
 
+    // Calculate the center of the target element relative to the tooltip
+    const targetCenter = rect.left + rect.width / 2;
+    const tooltipLeft = left;
+    const beakOffset = targetCenter - tooltipLeft;
+
+    // Set the beak offset as a CSS custom property
+    this.popup.style.setProperty("--beak-offset", `${beakOffset}px`);
+
     this.popup.style.top = `${top}px`;
     this.popup.style.left = `${left}px`;
     this.popup.style.opacity = "1";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rogieking/figui3",
-  "version": "1.8.8",
+  "version": "1.8.9",
   "module": "index.ts",
   "type": "module",
   "devDependencies": {