Popover

A floating card anchored to a trigger, holding a title, a body and anything interactive. A Tooltip is the version with neither.

Basic

Pass content for the body and title for an optional heading above it, and the popover opens when the trigger is hovered.

Sizes

Set size="small" for less padding, smaller text and a narrower title, next to the default medium, which follows compact mode.

Shapes

Set shape to squircle or round to change the bubble's corners, and pair it with arrow={false} so the arrow does not sit on the curve.

Transition

Set transition={false} and both mouse delays to 0 so the popover appears and disappears at once, with no zoom.

Colors

Set color to a preset such as blue, purple or gold to fill the popover, with its text kept readable on each fill.

Placement

Set placement to any of 12 positions around the trigger, and the popover flips on its own when it would leave the screen.

No arrow

Set arrow={false} to hide the arrow and show the popover as a plain floating card next to its trigger.

Arrow at center

Pass arrow={{ pointAtCenter: true }} to aim the arrow at the middle of a wide trigger when the popover is aligned to one edge.

Click trigger

Set trigger to click to keep the popover open until the reader clicks outside it, which content with buttons or links needs.

Focus trigger

Set trigger to focus to show the popover while a field has focus, here a new password's rules ticking off as you type.

Hint and panel

Nest a hover Popover inside a click one, each controlled, to show a short hint on hover and a full panel on click.

Nested popovers

Put a Popover inside another's content to open a second layer from the first, like the owners of a plan.

In context

The component inside real screens, with the components it usually sits beside.

Profile card

An avatar that opens a profile card on click, with the person's name, team tags and a link to their profile.

API Reference

Popover
Popover's props. Rows marked antuikit in the Version column are added by the kit.