Overlay · astro-ui · Tooltip

Tooltip

CSS-only hover/focus tooltip on a trigger wrapper.

Tooltip wraps a trigger and reveals a bubble on :hover and :focus-visible — pure CSS, no script. The bubble is aria-hidden; name the trigger with aria-label. Tooltips never carry essential information.

← All components

Features

Pure CSS :hover/:focus-visible
top/bottom placement with arrow
dark/light bubble variants
Respects prefers-reduced-transparency

Usage

---
import { Tooltip, Button } from "astro-ui";
---

<Tooltip ariaLabel="Delete item">
  <Button size="icon" variant="destructive" ariaLabel="Delete">␡</Button>
  <span slot="content">Delete this item permanently</span>
</Tooltip>

Demos

Basic

<Tooltip ariaLabel="Save document">
  <Button variant="outline">Save</Button>
  <span slot="content">Saves to your workspace</span>
</Tooltip>
<Tooltip placement="bottom" variant="light" ariaLabel="Help">
  <Button variant="ghost">Help</Button>
  <span slot="content">Light bubble, bottom placement</span>
</Tooltip>

API

Props

Prop	Type	Default	Description
`placement`	`"top" \| "bottom"`	`"top"`	Bubble side.
`variant`	`"dark" \| "light"`	`"dark"`	Bubble style.
`size`	`"sm" \| "md"`	`"sm"`	Bubble text scale.
`ariaLabel`	`string`	`—`	Accessible name for the trigger.
`class`	`string`	`—`	Merged via cn(); Tailwind classes welcome.
`id`	`string`	`—`	Element id.

Slots

Slot	Description
`default`	The trigger element.
`content`	Bubble content.

Accessibility

Implemented accessibility features — semantics, ARIA wiring, and keyboard behavior that ship with the component.

FAQ

Touch devices?

CSS-only tooltips don't trigger on tap by design — never put essential info in one; show it inline instead.

Changelog

Version history mentioning Tooltip.

v0.1.0 — 2026-11-11

added

Overlay (8): Dialog, AlertDialog, Sheet, Tooltip, Popover, HoverCard, Lightbox, Menu.