Tooltip
Get a short hint on hover, keyboard focus or tap; anything essential stays on the page outside the tooltip. Built on it: Truncate.
<script setup lang="ts">import { UiTooltip, UiButton } from 'grani'</script> <template> <UiTooltip content="Above, the default" side="top"> <UiButton variant="outline">top</UiButton> </UiTooltip> <UiTooltip content="Below" side="bottom"> <UiButton variant="outline">bottom</UiButton> </UiTooltip> <UiTooltip content="On the left, for a narrow column" side="left"> <UiButton variant="outline">left</UiButton> </UiTooltip> <UiTooltip content="On the right, clear of the rows below" side="right"> <UiButton variant="outline">right</UiButton> </UiTooltip></template>
Also called hint, hover hint.
Usage
<UiTooltip>…</UiTooltip> With GraniResolver in the Vite config, a template needs no import: set it up once.
API
| Name · type | Default | Description |
|---|---|---|
| contentstring= "" | "" | The hint. Empty or absent means no tooltip. |
| sidetop | bottom | left | right= "top" | "top" | Preferred side; it flips when that side has no room, and a side hint with room on neither side goes below or above. |
Attributes are placed by the component itself: its description says where.
When to use another component
| When you need | Take |
|---|---|
| A hint with a link or a control | Popover |
| The reason a button is off | Button or Icon button disabledReason, which keeps the focus and says it; for a button natively disabled, visible text beside it |
| A cut value in a cell | Truncate, built on it |
| A date | UiDateCell, built on it |