Components
Tooltips
Tooltips
One attribute, one tooltip. koala-tooltip writes the text into data-tippy-content and Tippy.js wires up the rest — hover delay, arrow, theme, placement, all consistent across the app.
Canonical
One attribute on any element. The library handles delay, positioning, and dismissal — the user gets the same behaviour everywhere.
Variants
6 variantsTop
data-tippy-placement="top"
Bottom
data-tippy-placement="bottom"
Left
data-tippy-placement="left"
Right
data-tippy-placement="right"
Click trigger
data-tippy-trigger="click"
Popover theme
data-tippy-theme="koala-popover"
States
3 statesDefault
Hover
Hover the button to fire Tippy
Focus
Keyboard focus also reveals the tooltip
Props
4 attributes| Attribute | Values | Notes |
|---|---|---|
| koala-tooltip | string | Required. Tooltip text. Rewritten to data-tippy-content at render time. |
| data-tippy-placement | top, bottom, left, right | Standard Tippy placement attribute. Defaults to top. |
| data-tippy-trigger | mouseenter focus, click | Use click to turn the tooltip into a sticky popover. |
| data-tippy-theme | koala, koala-popover | Defaults to the standard koala theme. koala-popover for richer card-style content. |
Do & don't
Do
Use a tooltip to expand on a glyph or icon-only control. Always pair it with an
aria-label so screen readers see the same answer.
Don't
Don't restate the label. The button already says “Save” — a tooltip that repeats the label adds noise and trains people to ignore tooltips.
Info tooltip
Click-triggered "What's this?" underlined link, typically rendered beneath a form question.
Bound to Tippy by the layout init script. Null or whitespace text suppresses output.