chore(Tooltip): update

playground/pages/tooltip.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="flex gap-1.5">
-    <UTooltip text="Tooltip">
+    <UTooltip content="Tooltip" side="bottom">
       <UButton icon="i-heroicons-rocket-launch" to="/" label="Button" />
     </UTooltip>
   </div>

src/runtime/components/Tooltip.vue

@@ -7,8 +7,7 @@ import theme from '#build/ui/tooltip'
 const tooltip = tv({ extend: tv(theme), ...(appConfig.ui?.tooltip || {}) })
 
 export interface TooltipProps extends TooltipRootProps, Omit<TooltipContentProps, 'as' | 'asChild'> {
-  text?: string
-  disabled?: boolean
+  content?: string
   arrow?: boolean
   portal?: boolean
   class?: any
@@ -19,7 +18,7 @@ export interface TooltipEmits extends TooltipRootEmits {}
 
 export interface TooltipSlots {
   default(): any
-  text(): any
+  content(): any
 }
 </script>
 
@@ -31,7 +30,7 @@ import { reactivePick } from '@vueuse/core'
 defineOptions({ inheritAttrs: false })
 
 const props = withDefaults(defineProps<TooltipProps>(), {
-  text: '',
+  content: undefined,
   side: 'bottom',
   delayDuration: 0,
   sideOffset: 8,
@@ -58,18 +57,18 @@ const ui = computed(() => tooltip())
 
     <TooltipPortal :disabled="!portal">
       <TooltipContent v-bind="{ ...forwardContent, ...$attrs }" :class="ui.content({ class: props.class })">
-        <slot name="text">
-          {{ text }}
+        <slot name="content">
+          {{ content }}
         </slot>
 
-        <TooltipArrow v-if="arrow" :width="11" :height="5" :class="ui.arrow()" />
+        <TooltipArrow v-if="arrow" :class="ui.arrow()" />
       </TooltipContent>
     </TooltipPortal>
   </TooltipRoot>
 </template>
 
 <style>
-@keyframes slideDown {
+@keyframes tooltipSlideDown {
   from {
     opacity: 0;
     transform: translateY(-0.25rem);
@@ -79,7 +78,7 @@ const ui = computed(() => tooltip())
     transform: translateY(0);
   }
 }
-@keyframes slideRight {
+@keyframes tooltipSlideRight {
   from {
     opacity: 0;
     transform: translateX(-0.25rem);
@@ -89,7 +88,7 @@ const ui = computed(() => tooltip())
     transform: translateY(0);
   }
 }
-@keyframes slideUp {
+@keyframes tooltipSlideUp {
   from {
     opacity: 0;
     transform: translateY(0.25rem);
@@ -99,7 +98,7 @@ const ui = computed(() => tooltip())
     transform: translateY(0);
   }
 }
-@keyframes slideLeft {
+@keyframes tooltipSlideLeft {
   from {
     opacity: 0;
     transform: translateX(0.25rem);

src/theme/tooltip.ts

@@ -1,6 +1,6 @@
 export default {
   slots: {
-    content: 'bg-white dark:bg-gray-900 text-gray-900 dark:text-white shadow rounded ring-1 ring-gray-200 dark:ring-gray-800 h-6 px-2 py-1 text-xs font-normal truncate relative data-[state=delayed-open]:data-[side=top]:animate-[slideDown_200ms_ease-out] data-[state=delayed-open]:data-[side=right]:animate-[slideLeft_200ms_ease-out] data-[state=delayed-open]:data-[side=left]:animate-[slideRight_200ms_ease-out] data-[state=delayed-open]:data-[side=bottom]:animate-[slideUp_200ms_ease-out] data-[state=closed]:data-[side=top]:animate-[slideUp_200ms_ease-in] data-[state=closed]:data-[side=right]:animate-[slideRight_200ms_ease-in] data-[state=closed]:data-[side=left]:animate-[slideLeft_200ms_ease-in] data-[state=closed]:data-[side=bottom]:animate-[slideDown_200ms_ease-in]',
-    arrow: 'fill-white dark:fill-gray-900'
+    content: 'bg-white dark:bg-gray-900 text-gray-900 dark:text-white shadow rounded ring-1 ring-gray-200 dark:ring-gray-800 h-6 px-2 py-1 text-xs font-normal truncate relative data-[state=delayed-open]:data-[side=top]:animate-[tooltipSlideDown_200ms_ease-out] data-[state=delayed-open]:data-[side=right]:animate-[tooltipSlideLeft_200ms_ease-out] data-[state=delayed-open]:data-[side=left]:animate-[tooltipSlideRight_200ms_ease-out] data-[state=delayed-open]:data-[side=bottom]:animate-[tooltipSlideUp_200ms_ease-out]',
+    arrow: 'fill-white dark:fill-gray-700'
   }
 }