Tooltip

Default

Use .tooltip with .tooltip-content so long text scrolls without clipping the arrow.

<div class="tooltip" role="tooltip">
	<div class="tooltip-content">This is how the tooltip looks</div>
	<div class="tooltip-arrow top"></div>
</div>

Placements

Use placement classes on .tooltip-arrow.

<div class="tooltip" role="tooltip">
	<div class="tooltip-content">Tooltip top</div>
	<div class="tooltip-arrow top"></div>
</div>
<div class="tooltip" role="tooltip">
	<div class="tooltip-content">Tooltip bottom</div>
	<div class="tooltip-arrow bottom"></div>
</div>

Interactive

Use data-tooltip and data-tooltip-placement. While visible, aria-describedby links it to the trigger; hover or focus keeps it open, and Escape closes it without moving focus. Long content stays within and scrolls inside the viewport.

<button
	class="btn btn-primary btn-solid"
	type="button"
	data-tooltip="Tooltip top"
	data-tooltip-placement="top">
	Hover me (top)
</button>

<button
	class="btn btn-primary btn-solid"
	type="button"
	data-tooltip="Tooltip right"
	data-tooltip-placement="right">
	Hover me (right)
</button>

<button
	class="btn btn-primary btn-solid"
	type="button"
	data-tooltip="Tooltip bottom"
	data-tooltip-placement="bottom">
	Hover me (bottom)
</button>

<button
	class="btn btn-primary btn-solid"
	type="button"
	data-tooltip="Tooltip left"
	data-tooltip-placement="left">
	Hover me (left)
</button>

CSS Variables

Override these variables on the component or an ancestor.

--tooltip-z-index: var(--z-index-tooltip);
--tooltip-bg-color: var(--bg-inverse);
--tooltip-color: var(--text-inverse);
--tooltip-padding-y: var(--spacer-1);
--tooltip-padding-x: var(--spacer-2);
--tooltip-border-radius: var(--border-radius-sm, var(--border-radius));
--tooltip-font-size: var(--font-size-xs, 0.75rem);
--tooltip-box-shadow: var(--shadow-lg);
--tooltip-arrow-size: 0.375rem;