Tooltip

Contextual text shown on hover and focus. Announced to screen readers via aria-describedby.

Placements

Preview Code top · bottom · left · right

<ac-tooltip placement="top">
<button class="ac-button ac-button--secondary ac-button--sm">Top</button>
<span slot="content">Tooltip on top</span>
</ac-tooltip>

<ac-tooltip placement="bottom">
<button class="ac-button ac-button--secondary ac-button--sm">Bottom</button>
<span slot="content">Tooltip on bottom</span>
</ac-tooltip>

<ac-tooltip placement="left">
<button class="ac-button ac-button--secondary ac-button--sm">Left</button>
<span slot="content">Tooltip on left</span>
</ac-tooltip>

<ac-tooltip placement="right">
<button class="ac-button ac-button--secondary ac-button--sm">Right</button>
<span slot="content">Tooltip on right</span>
</ac-tooltip>

Copy

Dark variant

Preview Code

<ac-tooltip variant="dark" placement="top">
<button class="ac-button ac-button--ghost ac-button--sm">Hover me</button>
<span slot="content">Always dark tooltip</span>
</ac-tooltip>

Copy

Attributes

Attribute	Values	Description
placement	top (default) | bottom | left | right	Position relative to trigger
variant	default | dark	Always-dark background