Tooltip
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 | generated with useId() | Id of the popper content, referenced by the trigger's aria-describedby. The generated value is stable across server and client rendering. |
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 | FloatingPlacement | 'top' | Tooltip position (top, bottom, left, right, …). |
ariaExpanded | boolean | — | Forwarded aria-expanded. |
ariaControls | string | — | Forwarded aria-controls. |
Emits: click (with the MouseEvent).
Slots: #icon.
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 | FloatingPlacement | 'top' | Tooltip position. |
Slots: #icon.
CSS variables
Tooltips render at the end of <body>, outside the trigger's wrapper, so set these on :root. They apply to UiTooltip, UiButtonTooltip and UiLinkTooltip.
:root {
--cffy-tooltip-bg-color: var(--cffy-primary-a10);
--cffy-tooltip-color: var(--cffy-on-primary);
--cffy-tooltip-radius: var(--cffy-radius-full);
}
| Variable | Default | Controls |
|---|---|---|
--cffy-tooltip-bg-color / --cffy-tooltip-color | --cffy-surface-tooltip / $white | Background and text |
--cffy-tooltip-padding | --cffy-space-8 | Padding |
--cffy-tooltip-radius | --cffy-radius-md, up to --cffy-shape-container | Corners |
--cffy-tooltip-shadow | none | Shadow |
--cffy-tooltip-font-size / --cffy-tooltip-font-weight | 0.6875rem / --cffy-fw-500 | Text |
--cffy-tooltip-kbd-bg-color / --cffy-tooltip-kbd-color | --cffy-surface-kbd / --cffy-on-background-inverse | Keyboard keys inside the tooltip |