fix(tooltip): allow passing attrs

Author: jpntex

.changeset/lucky-monkeys-fold.md

@@ -0,0 +1,5 @@
+---
+"@indielayer/ui": patch
+---
+
+fix(tooltip): allow passing attrs

packages/ui/src/components/tooltip/Tooltip.vue

@@ -176,32 +176,32 @@ const { classes, className } = useTheme('Tooltip', {}, props)
     @mouseleave="hideTooltip"
   >
     <slot></slot>
-  </component>
 
-  <teleport v-if="!computedDisabled" to="body">
-    <transition
-      enter-active-class="transition-opacity duration-150 ease-out"
-      leave-active-class="transition-opacity duration-150 ease-in"
-      enter-from-class="opacity-0"
-      enter-to-class="opacity-100"
-      leave-from-class="opacity-100"
-      leave-to-class="opacity-0"
-    >
-      <div
-        v-if="isVisible"
-        ref="tooltipRef"
-        :style="tooltipStyle"
-        class="fixed z-[9999] pointer-events-none"
-        :class="[
-          classes.tooltip,
-          animationOriginClasses
-        ]"
+    <teleport v-if="!computedDisabled" to="body">
+      <transition
+        enter-active-class="transition-opacity duration-150 ease-out"
+        leave-active-class="transition-opacity duration-150 ease-in"
+        enter-from-class="opacity-0"
+        enter-to-class="opacity-100"
+        leave-from-class="opacity-100"
+        leave-to-class="opacity-0"
       >
-        <slot name="tooltip">{{ tooltip }}</slot>
-        <div :class="['absolute overflow-hidden shadow-lg z-10', arrowPositionClasses]">
-          <div :class="['h-2.5 w-2.5 bg-secondary-700 transform border border-secondary-800', arrowRotationClasses]"></div>
+        <div
+          v-if="isVisible"
+          ref="tooltipRef"
+          :style="tooltipStyle"
+          class="fixed z-[10001] pointer-events-none"
+          :class="[
+            classes.tooltip,
+            animationOriginClasses
+          ]"
+        >
+          <slot name="tooltip">{{ tooltip }}</slot>
+          <div :class="['absolute overflow-hidden shadow-lg z-10', arrowPositionClasses]">
+            <div :class="['h-2.5 w-2.5 bg-secondary-700 transform border border-secondary-800', arrowRotationClasses]"></div>
+          </div>
         </div>
-      </div>
-    </transition>
-  </teleport>
+      </transition>
+    </teleport>
+  </component>
 </template>