Shows a small label on hover or focus of whatever it wraps, in four positions, with an optional arrow. Use the content slot for rich content instead of the text prop.
Ejemplos
Positions
Hover the buttons to see tooltips on each side.
Top tooltip
Bottom tooltip
Right tooltip
<div class="flex flex-wrap items-center gap-3">
<UiTooltip text="Top tooltip" position="top">
<UiButton variant="outline" color="gray">Top</UiButton>
</UiTooltip>
<UiTooltip text="Bottom tooltip" position="bottom">
<UiButton variant="outline" color="gray">Bottom</UiButton>
</UiTooltip>
<UiTooltip text="Right tooltip" position="right">
<UiButton variant="ghost" color="gray" icon-only aria-label="Info"><UiIcon name="mdi:information-outline" class="w-5 h-5" /></UiButton>
</UiTooltip>
</div>No arrow, and rich content
Hide the pointer with arrow false, or supply markup through the #content slot instead of the text prop.
No arrow here
Keyboard shortcut
Press Cmd-K to open the command palette.
<div class="flex flex-wrap items-center gap-6">
<UiTooltip text="No arrow here" :arrow="false">
<UiButton variant="outline" color="gray">Plain</UiButton>
</UiTooltip>
<UiTooltip position="right" width="w-64">
<UiButton variant="outline" color="gray">Rich</UiButton>
<template #content>
<strong>Keyboard shortcut</strong>
<p class="mt-1 opacity-80">Press Cmd-K to open the command palette.</p>
</template>
</UiTooltip>
</div>Props
| Nombre | Tipo | Por defecto | Descripción |
|---|---|---|---|
| text | string | '' | Tooltip label. |
| position | string | 'top' | Where the tooltip appears. topbottomleftright |
| width | string | 'w-56' | Tooltip width class. |
| arrow | boolean | true | Show the pointer arrow. |
| inline | boolean | true | Render the wrapper inline. |
Slots
| Slot | Descripción |
|---|---|
default | The trigger element the tooltip wraps. |
content | Rich tooltip content (alternative to the text prop). |