Library · Foundations

Tooltip

Accessible tooltip using the Popover API and CSS anchor positioning; full support in Chromium, degrades gracefully in Firefox/Safari.

Figma: Primitives / Tooltip ↗

Live preview — edit theme bottom-right

---
import Tooltip from "../components/primitives/tooltip/Tooltip.astro";
---
<!-- Uses the Popover API with CSS anchor positioning — full support in Chromium; degrades in Firefox/Safari -->
<Tooltip id="tt-story-1" triggerLabel="More information">
  <span slot="tooltip">This is some helpful tooltip text.</span>
</Tooltip>
<Tooltip id="tt-story-2" position="bottom">
  Hover or focus me
  <span slot="tooltip">Positioned below the trigger.</span>
</Tooltip>

Props

Name	Type	Required	Description
`id`	`string`	Yes	Unique ID for the tooltip (used for aria-describedby)
`position`	`'top' \| 'bottom' \| 'left' \| 'right'`	—	Preferred tooltip position (default: "top")
`offset`	`string`	—	Offset from the anchor element (default: "var(--space-2xs)")
`triggerLabel`	`string`	—	Screen reader label for icon-only triggers
`showIcon`	`boolean`	—	Whether to show the default help icon
`class`	`string`	—	Additional classes for the wrapper
`[key: string]`	`unknown`	—	HTML attributes to spread on the wrapper

Example with all props

<Tooltip
  id="pricing-tooltip"
  position="bottom"
  offset="0.5rem"
  triggerLabel="More information about pricing"
  showIcon={true}
  class="pricing-tooltip"
>
  Optional trigger content
  <span slot="tooltip">Tooltip body text.</span>
</Tooltip>