sprintify-ui 0.11.23 → 0.11.24

package/dist/sprintify-ui.es.js

@@ -7444,9 +7444,9 @@ function Vu(n, t, e = !1, r = 0, o = void 0, i = 6) {
   Tl(l, "mouseenter", () => {
     u = !0, c();
   }), Tl(l, "mouseleave", () => {
-    u = !1, d();
+    u = !1, e ? d() : s.value = !1;
   }), Tl(a, "mouseenter", () => {
-    e && (u = !0, c());
+    e && (u = !0, e ? c() : s.value = !0);
   }), Tl(a, "mouseleave", () => {
     e && (u = !1, d());
   });
@@ -7454,7 +7454,7 @@ function Vu(n, t, e = !1, r = 0, o = void 0, i = 6) {
     u && (s.value = !0);
   }, r), d = sn(() => {
     u || (s.value = !1);
-  }, e ? 0 : 150), f = {
+  }, 0), f = {
     placement: "top",
     middleware: [hl(i), ml(), Rv()],
     whileElementsMounted: pl
@@ -7472,12 +7472,12 @@ const BC = ["innerHTML"], Ji = /* @__PURE__ */ te({
     text: { default: null },
     floatingOptions: { default() {
       return {
-        placement: "top-start"
+        placement: "top"
       };
     } },
     interactive: { type: Boolean, default: !1 },
     delay: { default: 0 },
-    dark: { type: Boolean, default: !1 },
+    dark: { type: Boolean, default: !0 },
     offset: { default: 6 }
   },
   setup(n) {
@@ -7499,10 +7499,10 @@ const BC = ["innerHTML"], Ji = /* @__PURE__ */ te({
             style: Fe(g(i))
           }, [
             ee(An, {
-              "enter-active-class": "transition duration-200 ease-out",
+              "enter-active-class": "transition duration-100 ease-out",
               "enter-from-class": "transform scale-90 opacity-0",
               "enter-to-class": "transform scale-100 opacity-100",
-              "leave-active-class": "transition duration-75 ease-in",
+              "leave-active-class": "transition duration-0 ease-in",
               "leave-from-class": "transform scale-100 opacity-100",
               "leave-to-class": "transform scale-90 opacity-0"
             }, {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sprintify-ui",
-  "version": "0.11.23",
+  "version": "0.11.24",
   "type": "module",
   "scripts": {
     "generate-llm-txt": "node scripts/generate-llm-txt.js",

package/src/components/BaseTooltip.stories.js

@@ -5,9 +5,6 @@ import { BaseCardRow } from "."
 export default {
   title: "Components/BaseTooltip",
   component: BaseTooltip,
-  args: {
-    text: "Click here to learn more about this button",
-  },
 };
 
 const Template = (args) => ({
@@ -22,8 +19,16 @@ const Template = (args) => ({
   template: `
     <BaseCard>
         <BaseCardRow size=sm>
-        <BaseTooltip class="inline-block" title="test" v-bind="args">
-            <div>Hover me, the tooltip show appear outside the BaseCard</div>
+        <BaseTooltip class="inline-block" text="test 1" v-bind="args">
+            <div>TEST 1</div>
+        </BaseTooltip>
+
+        <BaseTooltip class="inline-block" text="test 2" v-bind="args">
+            <div>TEST 2</div>
+        </BaseTooltip>
+
+        <BaseTooltip class="inline-block" text="test 3" v-bind="args">
+            <div>TEST 3</div>
         </BaseTooltip>
         </BaseCardRow>
     </BaseCard>

package/src/components/BaseTooltip.vue

@@ -15,10 +15,10 @@
         :style="floatingStyles"
       >
         <transition
-          enter-active-class="transition duration-200 ease-out"
+          enter-active-class="transition duration-100 ease-out"
           enter-from-class="transform scale-90 opacity-0"
           enter-to-class="transform scale-100 opacity-100"
-          leave-active-class="transition duration-75 ease-in"
+          leave-active-class="transition duration-0 ease-in"
           leave-from-class="transform scale-100 opacity-100"
           leave-to-class="transform scale-90 opacity-0"
         >
@@ -64,12 +64,12 @@ const props = withDefaults(defineProps<{
   text: null,
   floatingOptions() {
     return {
-      placement: 'top-start',
+      placement: 'top',
     };
   },
   interactive: false,
   delay: 0,
-  dark: false,
+  dark: true,
   offset: 6,
 });
 

package/src/composables/tooltip.ts

@@ -36,15 +36,26 @@ function useTooltip(
 
     useEventListener(elementRef, 'mouseleave', () => {
         nextShow = false;
-        hideDebounce();
+
+        if (interactive) {
+            hideDebounce();
+        } else {
+            show.value = false;
+        }
     });
 
     useEventListener(floatingRef, 'mouseenter', () => {
         if (!interactive) {
             return;
         }
+
         nextShow = true;
-        showDebounce();
+
+        if (interactive) {
+            showDebounce();
+        } else {
+            show.value = true;
+        }
     });
 
     useEventListener(floatingRef, 'mouseleave', () => {
@@ -67,7 +78,7 @@ function useTooltip(
             return;
         }
         show.value = false;
-    }, interactive ? 0 : 150);
+    }, 0);
 
     const config = {
         placement: 'top',