Display content that appears on hover next to an element.
<template>
<UTooltip text="Tooltip example" :shortcuts="['⌘', 'O']">
<UButton color="gray" label="Hover me" />
</UTooltip>
</template>
Use the popper
prop to customize the popper instance.
<template>
<UTooltip text="Tooltip example" :shortcuts="['⌘', 'O']" :popper="{ arrow: true }">
<UButton color="gray" label="Hover me" />
</UTooltip>
</template>
<template>
<UTooltip text="Tooltip example" :shortcuts="['⌘', 'O']" :popper="{ placement: 'right' }">
<UButton color="gray" label="Hover me" />
</UTooltip>
</template>
<template>
<UTooltip text="Tooltip example" :shortcuts="['⌘', 'O']" :popper="{ offsetDistance: 16 }">
<UButton color="gray" label="Hover me" />
</UTooltip>
</template>
Use the #text
slot to override the content of the text.
<template>
<UTooltip>
<template #text>
<span class="italic">Hello World!</span>
</template>
</UTooltip>
</template>
ui
Type: {}
(See Config for type definition)
text
Type: string
Default: null
popper
Type: PopperOptions
Property | Type | Default |
---|---|---|
placement | 'left' | 'right' | 'bottom-end' | 'auto' | 'auto-start' | 'auto-end' | 'top' | 'bottom' | 'top-start' | 'top-end' | 'bottom-start' | 'right-start' | 'right-end' | 'left-start' | 'left-end' |
'bottom' |
strategy | 'fixed' | 'absolute' |
'fixed' |
arrow | boolean |
false |
offsetDistance | number |
0 |
offsetSkid | number |
0 |
overflowPadding | number |
0 |
gpuAcceleration | boolean |
true |
adaptive | boolean |
true |
scroll | boolean |
true |
resize | boolean |
true |
locked | boolean |
false |
shortcuts
Type: string[]
Default: []
openDelay
Type: number
Default: config.default.openDelay
closeDelay
Type: number
Default: config.default.closeDelay
prevent
Type: boolean
Default: false
{
wrapper: 'relative inline-flex',
container: 'z-20 group',
width: 'max-w-xs',
background: 'bg-white dark:bg-gray-900',
color: 'text-gray-900 dark:text-white',
shadow: 'shadow',
rounded: 'rounded',
ring: 'ring-1 ring-gray-200 dark:ring-gray-800',
base: '[@media(pointer:coarse)]:hidden h-6 px-2 py-1 text-xs font-normal truncate relative',
shortcuts: 'hidden md:inline-flex flex-shrink-0 gap-0.5',
middot: 'mx-1 text-gray-700 dark:text-gray-200',
transition: {
enterActiveClass: 'transition ease-out duration-200',
enterFromClass: 'opacity-0 translate-y-1',
enterToClass: 'opacity-100 translate-y-0',
leaveActiveClass: 'transition ease-in duration-150',
leaveFromClass: 'opacity-100 translate-y-0',
leaveToClass: 'opacity-0 translate-y-1'
},
popper: {
strategy: 'fixed'
},
default: {
openDelay: 0,
closeDelay: 0
},
arrow: {
base: '[@media(pointer:coarse)]:hidden invisible before:visible before:block before:rotate-45 before:z-[-1] before:w-2 before:h-2',
ring: 'before:ring-1 before:ring-gray-200 dark:before:ring-gray-800',
rounded: 'before:rounded-sm',
background: 'before:bg-gray-200 dark:before:bg-gray-800',
shadow: 'before:shadow',
placement: "group-data-[popper-placement*='right']:-left-1 group-data-[popper-placement*='left']:-right-1 group-data-[popper-placement*='top']:-bottom-1 group-data-[popper-placement*='bottom']:-top-1"
}
}