Overlays
Tooltip
Display content that appears on hover next to an element.
Usage
<template>
<UTooltip text="Tooltip example" :shortcuts="['⌘', 'O']">
<UButton color="gray" label="Hover me" />
</UTooltip>
</template>
Popper
Use the popper prop to customize the popper instance.
Arrow
<template>
<UTooltip text="Tooltip example" :shortcuts="['⌘', 'O']" :popper="{ arrow: true }">
<UButton color="gray" label="Hover me" />
</UTooltip>
</template>
Placement
<template>
<UTooltip text="Tooltip example" :shortcuts="['⌘', 'O']" :popper="{ placement: 'right' }">
<UButton color="gray" label="Hover me" />
</UTooltip>
</template>
Offset
<template>
<UTooltip text="Tooltip example" :shortcuts="['⌘', 'O']" :popper="{ offsetDistance: 16 }">
<UButton color="gray" label="Hover me" />
</UTooltip>
</template>
Slots
text
Use the #text slot to override the content of the text.
Hover
<UTooltip>
<template #text>
<span class="italic">Hello World!</span>
</template>
</UTooltip>
Props
ui
{}
{}text
string
nullpopper
PopperOptions
{}openDelay
number
0closeDelay
number
0shortcuts
string[]
[]prevent
boolean
falseConfig
{
"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"
},
"arrow": {
"base": "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"
}
}