Usage
Use a Button or any other component in the default slot of the Tooltip.
<template>
<UTooltip text="Open on GitHub">
<UButton label="Open" color="neutral" variant="subtle" />
</UTooltip>
</template>
App component which uses the TooltipProvider component from Reka UI.Text
Use the text prop to set the content of the Tooltip.
<template>
<UTooltip text="Open on GitHub">
<UButton label="Open" color="neutral" variant="subtle" />
</UTooltip>
</template>
Kbds
Use the kbds prop to render Kbd components in the Tooltip.
<template>
<UTooltip text="Open on GitHub" :kbds="['meta', 'G']">
<UButton label="Open" color="neutral" variant="subtle" />
</UTooltip>
</template>
meta that displays as ⌘ on macOS and Ctrl on other platforms.Delay
Use the delay-duration prop to change the delay before the Tooltip appears. For example, you can make it appear instantly by setting it to 0.
<template>
<UTooltip :delay-duration="0" text="Open on GitHub">
<UButton label="Open" color="neutral" variant="subtle" />
</UTooltip>
</template>
tooltip.delayDuration option in the App component.Content
Use the content prop to control how the Tooltip content is rendered, like its align or side for example.
<template>
<UTooltip
:content="{
align: 'center',
side: 'bottom',
sideOffset: 8
}"
text="Open on GitHub"
>
<UButton label="Open" color="neutral" variant="subtle" />
</UTooltip>
</template>
Arrow
Use the arrow prop to display an arrow on the Tooltip.
<template>
<UTooltip arrow text="Open on GitHub">
<UButton label="Open" color="neutral" variant="subtle" />
</UTooltip>
</template>
Disabled
Use the disabled prop to disable the Tooltip.
<template>
<UTooltip disabled text="Open on GitHub">
<UButton label="Open" color="neutral" variant="subtle" />
</UTooltip>
</template>
Examples
Control open state
You can control the open state by using the default-open prop or the v-model:open directive.
<script setup lang="ts">
const open = ref(false)
defineShortcuts({
o: () => open.value = !open.value
})
</script>
<template>
<UTooltip v-model:open="open" text="Open on GitHub">
<UButton label="Open" color="neutral" variant="subtle" />
</UTooltip>
</template>
defineShortcuts, you can toggle the Tooltip by pressing O.With following cursor
You can make the Tooltip follow the cursor when hovering over an element using the reference prop:
<script setup lang="ts">
const open = ref(false)
const anchor = ref({ x: 0, y: 0 })
const reference = computed(() => ({
getBoundingClientRect: () =>
({
width: 0,
height: 0,
left: anchor.value.x,
right: anchor.value.x,
top: anchor.value.y,
bottom: anchor.value.y,
...anchor.value
} as DOMRect)
}))
</script>
<template>
<UTooltip
:open="open"
:reference="reference"
:content="{ side: 'top', sideOffset: 16, updatePositionStrategy: 'always' }"
>
<div
class="flex items-center justify-center rounded-md border border-dashed border-accented text-sm aspect-video w-72"
@pointerenter="open = true"
@pointerleave="open = false"
@pointermove="(ev) => {
anchor.x = ev.clientX
anchor.y = ev.clientY
}"
>
Hover me
</div>
<template #content>
{{ anchor.x.toFixed(0) }} - {{ anchor.y.toFixed(0) }}
</template>
</UTooltip>
</template>
API
Props
| Prop | Default | Type |
|---|---|---|
text |
The text content of the tooltip. | |
kbds |
The keyboard keys to display in the tooltip.
| |
content |
|
The content of the tooltip.
|
arrow |
|
Display an arrow alongside the tooltip. |
portal |
|
Render the tooltip in a portal. |
reference |
The reference (or anchor) element that is being referred to for positioning. If not provided will use the current component as anchor.
| |
defaultOpen |
The open state of the tooltip when it is initially rendered. Use when you do not need to control its open state. | |
open |
The controlled open state of the tooltip. | |
delayDuration |
|
Override the duration given to the |
disableHoverableContent |
Prevents Tooltip.Content from remaining open when hovering. Disabling this has accessibility consequences. Inherits from Tooltip.Provider. | |
disableClosingTrigger |
|
When |
disabled |
|
When |
ignoreNonKeyboardFocus |
|
Prevent the tooltip from opening if the focus did not come from
the keyboard by matching against the |
ui |
|
Slots
| Slot | Type |
|---|---|
default |
|
content |
|
Emits
| Event | Type |
|---|---|
update:open |
|
Theme
export default defineAppConfig({
ui: {
tooltip: {
slots: {
content: 'flex items-center gap-1 bg-default text-highlighted shadow-sm rounded-sm ring ring-default h-6 px-2.5 py-1 text-xs select-none data-[state=delayed-open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] origin-(--reka-tooltip-content-transform-origin) pointer-events-auto',
arrow: 'fill-default',
text: 'truncate',
kbds: "hidden lg:inline-flex items-center shrink-0 gap-0.5 not-first-of-type:before:content-['·'] not-first-of-type:before:me-0.5",
kbdsSize: 'sm'
}
}
}
})
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import ui from '@nuxt/ui/vite'
export default defineConfig({
plugins: [
vue(),
ui({
ui: {
tooltip: {
slots: {
content: 'flex items-center gap-1 bg-default text-highlighted shadow-sm rounded-sm ring ring-default h-6 px-2.5 py-1 text-xs select-none data-[state=delayed-open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] origin-(--reka-tooltip-content-transform-origin) pointer-events-auto',
arrow: 'fill-default',
text: 'truncate',
kbds: "hidden lg:inline-flex items-center shrink-0 gap-0.5 not-first-of-type:before:content-['·'] not-first-of-type:before:me-0.5",
kbdsSize: 'sm'
}
}
}
})
]
})