Components
Tooltip
Add tooltips to buttons and links.
UiTooltip is a generic tooltip wrapper for any trigger element. UiButtonTooltip and UiLinkTooltip wrap a button or link with a floating tooltip, adding button/link semantics on top.
Wrap any element
Use UiTooltip when the trigger isn't a plain button or link — its default slot is the trigger, and text sets the tooltip content.
<template>
<UiTooltip text="Helpful hint" placement="bottom">
<UiButton variant="outline" text="Hover me" />
</UiTooltip>
</template>
Rich tooltip content
Use the #content slot instead of text for markup like kbd shortcuts or links.
<template>
<UiTooltip placement="top">
<UiButton variant="outline" icon>
<template #icon>
<UiIconMaterial icon-code="" />
</template>
</UiButton>
<template #content>
Save changes <kbd>Ctrl</kbd> + <kbd>S</kbd>
</template>
</UiTooltip>
</template>
Button with a tooltip
<template>
<UiButtonTooltip variant="outline" icon tooltip-text="Add item">
<template #icon>
<UiIconMaterial icon-code="" />
</template>
</UiButtonTooltip>
</template>
Link with a tooltip
<script setup lang="ts">
import { NuxtLink } from '#components'
</script>
<template>
<UiLinkTooltip
:as="NuxtLink"
to="/docs"
text="Docs"
tooltip-text="Read the documentation"
placement="bottom"
/>
</template>
UiTooltip props
| Prop | Type | Default | Description |
|---|---|---|---|
text | string | null | — | Plain-text tooltip content. Ignored when the #content slot is used. |
placement | FloatingPlacement | 'top' | Tooltip position (top, bottom, left, right, and their -start/-end variants). |
disabled | boolean | false | Disables the tooltip. |
ariaId | string | — | Accessible id applied to the popper content. Auto-generated by floating-vue when omitted. |
customClass | string | string[] | Record<string, boolean> | null | — | Extra classes for the trigger wrapper element. |
Slots: default is the trigger element; content renders rich tooltip content instead of text.
UiTooltip frees you from wrapping a trigger in UiButtonTooltip/UiLinkTooltip when it isn't a plain button or link — for example an avatar, an icon, or a custom control.UiButtonTooltip props
Extends UiButton props, plus:
| Prop | Type | Default | Description |
|---|---|---|---|
tooltipText | string | — | Tooltip content. |
placement | Placement | — | Tooltip position (top, bottom, left, right, …). |
ariaExpanded | boolean | — | Forwarded aria-expanded. |
ariaControls | string | — | Forwarded aria-controls. |
Emits: onClick.
UiLinkTooltip props
Extends the base button props, plus:
| Prop | Type | Default | Description |
|---|---|---|---|
to | string | object | — | Router destination. |
href | string | — | External URL. |
as | string | object | 'a' | Link component. |
tooltipText | string | null | — | Tooltip content. |
placement | Placement | — | Tooltip position. |