Tooltip

A short hint that appears when the pointer rests on an element or it gets keyboard focus. Like Menu, it’s positioned with Floating UI and sits in the browser’s top layer.

---
import { Button, Icon, Tooltip } from 'bws-astro-ui';
import { Download } from 'bws-astro-ui/icons';
---

<Tooltip text="Download the report">
  <Button slot="activator" variant="text" aria-label="Download">
    <Icon icon={Download} />
  </Button>
</Tooltip>

The activator gets aria-describedby, so screen readers read the tooltip as its description. A tooltip adds information — an icon-only button still needs its own aria-label.

Location

location takes any Floating UI placement — top (default), bottom, left, right, also with -start / -end. The tooltip flips when there isn’t room and stays on screen.

Rich content

<Tooltip location="bottom">
  <Button slot="activator">Search</Button>
  <strong>Shortcut</strong> — press <kbd>⌘K</kbd>
</Tooltip>

Long text wraps at 20rem.

Behavior

It shows after the pointer rests on the activator for openDelay (200 ms), so it doesn’t flash while the pointer passes over, and hides closeDelay (100 ms) after it leaves.
The pointer can move onto the tooltip without it hiding — e.g. to select its text.
Keyboard focus shows it right away; Escape hides it without moving focus.
Touch screens have no hover, so a tap doesn’t flash it — keep essential information out of tooltips.

API

Prop	Type	Default
`text`	`string`	—
`location`	a Floating UI placement	`top`
`openDelay`	`number` — milliseconds	`200`
`closeDelay`	`number` — milliseconds	`100`
`id`, `class`	`string` — for the tooltip element	—

Slot	Content
`activator`	the element the tooltip describes
default	rich content, replacing `text`

Created by