Tooltip
A short explanation that appears when an element is hovered with the mouse or focused with the keyboard. Use it to show what an icon button does or the full text of a shortened value.
Basic usage
Put the element to describe inside the component and give the text with text. The tooltip opens on hover and on Tab focus, and closes with Esc. It is a single line; keep it to a few words and use Popover for longer explanations.
<div class="py-6">
<acun:tooltip text="The customer's order history">
<acun:button variant="white" size="sm">History</acun:button>
</acun:tooltip>
</div>| Prop | Values |
|---|---|
text | Tooltip text (single line) |
Position
By default the tooltip opens above the element (top). When the element is close to the top edge of the page, open it below with position="bottom".
<div class="flex gap-4 py-6">
<acun:tooltip text="Opens above"><acun:button variant="outline-dark" size="sm">Top</acun:button></acun:tooltip>
<acun:tooltip text="Opens below" position="bottom"><acun:button variant="outline-dark" size="sm">Bottom</acun:button></acun:tooltip>
</div>| Prop | Values |
|---|---|
position | top | bottom |
Icon buttons
Icon-only buttons in table rows are the most common use. The tooltip is rendered with role="tooltip" and automatically linked to the first focusable element in the slot with aria-describedby; the screen reader reads the button's name first, then the tooltip. A tooltip is a description and does not replace a name: still give icon buttons an aria-label.
<div class="flex gap-1 py-6">
<acun:tooltip text="Edit">
<acun:button variant="ghost" size="icon" aria-label="Edit"><acun:icon name="pencil-square" /></acun:button>
</acun:tooltip>
<acun:tooltip text="Print">
<acun:button variant="ghost" size="icon" aria-label="Print"><acun:icon name="printer" /></acun:button>
</acun:tooltip>
<acun:tooltip text="Delete permanently">
<acun:button variant="ghost" size="icon" aria-label="Delete permanently" class="text-red-600"><acun:icon name="trash" /></acun:button>
</acun:tooltip>
</div>| Prop | Values |
|---|---|
aria-label | Accessible name of the button |
aria-describedby | Automatic: added to the first focusable element in the slot |
In scrollable areas
The tooltip is moved to the outermost level of the page (body) and rendered there, so it is not cut off at the edge of horizontally scrolling tables or panels. When you give a tooltip to an element that cannot receive focus on its own, such as a badge, add tabindex="0" to it so it can also be opened with the keyboard.
<div class="max-w-xs overflow-x-auto rounded-sm border border-gray-200 py-6 dark:border-zinc-700">
<div class="flex w-[36rem] items-center gap-6 px-4 text-sm">
<span>Kadıköy warehouse</span>
<acun:tooltip text="Warehouse code: KDK-01"><acun:badge variant="info" tabindex="0">KDK-01</acun:badge></acun:tooltip>
<span>312 orders</span>
</div>
</div>Props and slots
The values the component accepts.
| Prop | Default | Description |
|---|---|---|
text | '' | Tooltip text (role="tooltip") |
position | top | top · bottom |