Tooltip
A small contextual label that appears on hover and focus. Wrap a single focusable
element, pass content, and the tooltip positions itself with Floating UI —
flipping and shifting to stay in view.
Import
import { Tooltip } from '@metatoy/bootstrap-styled';Basic
Tooltip takes exactly one focusable child (a button, link, or other interactive
element) and shows content on hover or keyboard focus. Try it — hover the button, or
tab to it:
Placements
Set placement to position the tooltip. It accepts the twelve Floating UI placements —
the four sides (top, right, bottom, left) and their -start / -end variants.
The default is top. If a side would overflow, the tooltip automatically flips to the
opposite side:
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| content● | React.ReactNode | — | — |
| placement | "top" | "bottom" | "right" | "left" | "top-start" | "top-end" | "bottom-start" | "bottom-end" | "right-start" | "right-end" | "left-start" | "left-end" | — | — |
| defaultOpen | boolean | — | Render shown from the first paint (harness/static use). |
| children● | React.ReactElement | — | Single focusable element to attach the tooltip to. |
The content can be any React node. defaultOpen renders the tooltip shown from first
paint, which is useful for static screenshots or tests. The tooltip is rendered through a
portal into <body>, so it is never clipped by an overflow container.
Theming
The tooltip bubble uses --bs-emphasis-color for its background and --bs-body-bg for
its text (an inverted chip), with --bs-border-radius for the corner and
--bs-tooltip-opacity (0.9) for the fade. Because it portals outside the provider’s
theme wrapper, the library re-establishes the active color mode’s tokens on the portal,
so the tooltip stays legible in both light and dark modes.
Accessibility
The tooltip is built on Floating UI’s interaction hooks: it opens on hover and on
keyboard focus, closes on blur, Escape, and outside interaction, and wires the
trigger to the tooltip with aria-describedby via useRole. Attach it only to a
genuinely focusable element so keyboard and assistive-tech users can reach it. Keep the
content short — a tooltip is a supplementary label, not a place for essential or
interactive content (use a Popover for that).
Explore in Ladle
This component does not have a dedicated Ladle story. Browse the full component gallery: Open Ladle ↗