Components
Tooltip
Add tooltips to buttons and links.
UiButtonTooltip and UiLinkTooltip wrap a button or link with a floating tooltip.
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>
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. |