chore(Tooltip): update props

playground/pages/tooltip.vue

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

src/runtime/components/Tooltip.vue

@@ -1,6 +1,6 @@
 <script lang="ts">
 import { tv } from 'tailwind-variants'
-import type { TooltipRootProps, TooltipRootEmits, TooltipContentProps } from 'radix-vue'
+import type { TooltipRootProps, TooltipRootEmits, TooltipContentProps, TooltipArrowProps } from 'radix-vue'
 import type { AppConfig } from '@nuxt/schema'
 import _appConfig from '#build/app.config'
 import theme from '#build/ui/tooltip'
@@ -9,9 +9,10 @@ const appConfig = _appConfig as AppConfig & { ui: { tooltip: Partial<typeof them
 
 const tooltip = tv({ extend: tv(theme), ...(appConfig.ui?.tooltip || {}) })
 
-export interface TooltipProps extends TooltipRootProps, Omit<TooltipContentProps, 'as' | 'asChild'> {
+export interface TooltipProps extends TooltipRootProps {
-  content?: string
+  text?: string
-  arrow?: boolean
+  content?: Omit<TooltipContentProps, 'as' | 'asChild'>
+  arrow?: boolean | Omit<TooltipArrowProps, 'as' | 'asChild'>
   portal?: boolean
   class?: any
   ui?: Partial<typeof tooltip.slots>
@@ -21,42 +22,40 @@ export interface TooltipEmits extends TooltipRootEmits {}
 
 export interface TooltipSlots {
   default(): any
-  content(): any
+  text(): any
 }
 </script>
 
 <script setup lang="ts">
-import { computed } from 'vue'
+import { computed, toRef } from 'vue'
-import { TooltipRoot, TooltipTrigger, TooltipPortal, TooltipContent, TooltipArrow, useForwardProps, useForwardPropsEmits } from 'radix-vue'
+import { defu } from 'defu'
+import { TooltipRoot, TooltipTrigger, TooltipPortal, TooltipContent, TooltipArrow, useForwardPropsEmits } from 'radix-vue'
 import { reactivePick } from '@vueuse/core'
 
-const props = withDefaults(defineProps<TooltipProps>(), {
+const props = defineProps<TooltipProps>()
-  side: 'bottom',
-  delayDuration: 0,
-  sideOffset: 8
-})
 const emits = defineEmits<TooltipEmits>()
 defineSlots<TooltipSlots>()
 
-const forwardRoot = useForwardPropsEmits(reactivePick(props, 'defaultOpen', 'open', 'delayDuration'), emits)
+const rootProps = useForwardPropsEmits(reactivePick(props, 'defaultOpen', 'open', 'delayDuration'), emits)
-const forwardContent = useForwardProps(reactivePick(props, 'side', 'sideOffset', 'align', 'alignOffset', 'avoidCollisions', 'collisionBoundary', 'collisionPadding', 'arrowPadding', 'sticky', 'hideWhenDetached'))
+const contentProps = toRef(() => defu(props.content, { side: 'bottom', sideOffset: 8 }) as TooltipContentProps)
+const arrowProps = toRef(() => props.arrow as TooltipArrowProps)
 
 const ui = computed(() => tv({ extend: tooltip, slots: props.ui })())
 </script>
 
 <template>
-  <TooltipRoot v-bind="forwardRoot">
+  <TooltipRoot v-bind="rootProps">
     <TooltipTrigger as-child>
       <slot />
     </TooltipTrigger>
 
     <TooltipPortal :disabled="!portal">
-      <TooltipContent v-bind="forwardContent" :class="ui.content({ class: props.class })">
+      <TooltipContent v-bind="contentProps" :class="ui.content({ class: props.class })">
-        <slot name="content">
+        <slot name="text">
-          {{ content }}
+          {{ text }}
         </slot>
 
-        <TooltipArrow v-if="arrow" :class="ui.arrow()" />
+        <TooltipArrow v-if="!!arrow" v-bind="arrowProps" :class="ui.arrow()" />
       </TooltipContent>
     </TooltipPortal>
   </TooltipRoot>