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.

koala-tooltip

Canonical

One attribute on any element. The library handles delay, positioning, and dismissal — the user gets the same behaviour everywhere.

Variants

6 variants

Top

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 states

Default

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.