Popover
A click-triggered overlay with an optional title and a rich body — like a tooltip, but
bigger and dismissible. Wrap a trigger element, pass content (and an
optional title), and Floating UI keeps it positioned in view.
Import
import { Popover } from '@metatoy/bootstrap-styled';Basic
Unlike a tooltip, a popover opens on click and stays open until you click the trigger
again, click outside, or press Escape. Pass a title for the header and content for
the body:
Placements
Set placement to position the popover. It accepts the twelve Floating UI placements —
the four sides (top, right, bottom, left) and their -start / -end variants.
The default is top, and it flips automatically when a side would overflow:
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| title | React.ReactNode | — | — |
| 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 element that toggles the popover on click. |
Both title and content accept any React node, so a popover body can hold formatted
text, lists, or small controls. defaultOpen renders it shown from first paint for
static screenshots or tests. The popover portals into <body>, so an overflow container
never clips it.
Theming
The popover surface uses --bs-body-bg for its background and --bs-body-color for
text, --bs-secondary-bg for the header band, --bs-border-color-translucent for the
border, and --bs-border-radius-lg for the corner. Because it portals outside the
provider’s theme wrapper, the library re-establishes the active color mode’s tokens on
the portal so the popover matches light and dark modes automatically.
Accessibility
The popover is built on Floating UI’s interaction hooks: it toggles on click, closes on
outside interaction and Escape, and applies a dialog role wiring the trigger to the
surface. Use a genuinely focusable element (a button) as the trigger so keyboard and
assistive-tech users can open it. Prefer a popover over a Tooltip
whenever the overlay contains text users need to read at leisure or interactive content.
Explore in Ladle
This component does not have a dedicated Ladle story. Browse the full component gallery: Open Ladle ↗