React Popover Component Examples

The shortest possible Popover. Pass children to Popover.Trigger to render the outline button text, then pass content to Popover.Content to render the floating panel. The default position is bottom, so the panel anchors top-full mt-2 left-1/2 -translate-x-1/2 relative to the root — eight pixels below the trigger and horizontally centered on it. The panel ships with min-w-[200px] p-4 bg-card border border-border rounded-[12px] shadow-lg so a short heading plus a sentence of body text fits without extra wrapper styling.

This is the right starting shape for a brief help panel, a confirmation prompt with no input fields, or any short content that fits in a 200-pixel-wide panel without scrolling. The trigger inherits the Drivn outline button styling — rounded corners, muted border, hover background — so it sits next to other outline buttons in a toolbar without visual mismatch. For panels that need a different trigger element (an avatar, an icon-only button, a link), see the form-field hint example later on this page or read Drivn vs shadcn Popover for the trigger-customization story.

Set position="right" on the root to anchor the content to the right of the trigger. The panel slides to left-full ml-2 top-1/2 -translate-y-1/2 — eight pixels to the right of the trigger, vertically centered on it. The right placement is the natural fit when the trigger sits at the start of a row and the content needs the horizontal space the row already provides. Use top for triggers at the bottom of the viewport and left when the trigger sits at the right edge of a container.

Drivn's placement is fixed at render time — the panel does not flip to the opposite side when it would collide with the viewport edge. The intentional simplification means triggers placed too close to a viewport edge will render content that overflows the viewport. The fix is to pick the placement at the call site based on where the trigger sits, or to switch to the shadcn/ui flavor for Floating-UI-driven collision flipping. See the placement comparison in Drivn vs shadcn Popover for the full trade-off discussion.

When you need to see the placement model rather than read about it, render four roots in a row, one per position value. Each Popover.Content reads position off the context and looks it up in styles.positions, which holds exactly four entries: top is bottom-full mb-2 left-1/2 -translate-x-1/2, bottom is top-full mt-2 left-1/2 -translate-x-1/2, left is right-full mr-2 top-1/2 -translate-y-1/2, and right is left-full ml-2 top-1/2 -translate-y-1/2. Side by side the symmetry is obvious — vertical placements center horizontally and offset with mb-2 or mt-2, horizontal placements center vertically and offset with mr-2 or ml-2.

The demo doubles as a regression fixture. Open each trigger in turn and confirm the panel lands on the expected side; because the panel is always mounted and only toggles opacity, a placement bug shows up as a misplaced ghost before you even click. Keep the row in a flex items-center gap-3 wrapper and leave the strip some breathing room — the left and right panels each claim at least 200 pixels beside their trigger, enough to overlap a neighbour in a tight container. The Popover docs page carries the props table if you are documenting the placement model for a team.

A typical share menu lives behind a single "Share" button and opens a panel with two or three actions: copy the current URL, share to X, share by email. Render the actions as buttons inside the Popover.Content, each calling the matching handler. The popover dismisses on outside click automatically, so after the user clicks "Copy link" the panel closes the next time the user clicks anywhere else — which matches the expected behaviour for a transient share menu.

For a polished UX, swap the plain action buttons for Drivn Button instances with variant="ghost" so the actions inherit the same hover-background and rounded-corner styling as the trigger. Add a text-left w-full className on each button so the labels left-align inside the panel. If the panel grows wider than the default min-w-[200px] because of long action labels, the panel inherits the trigger's center alignment — the left-1/2 -translate-x-1/2 math centers any width automatically. See the Drivn vs shadcn Popover page for the trigger-customization trade-off discussion that applies to the share-menu shape.

A common form pattern is a label with an info icon next to it that opens a popover explaining the field. Place the Popover next to the Input inside the same <label> block, render the trigger as the info icon with aria-label="Field info", and let the content explain validation rules, accepted formats, or examples. The pattern keeps the inline help available without permanently consuming layout space below the input — readers who already know the field skip past the icon, readers who need help click it.

Use position="right" so the content opens to the right of the icon rather than below it, which avoids covering the input on a focused field. For mobile layouts where horizontal space is tighter, switch to position="top" so the panel stacks above the field instead. The popover content can include a short example or a code snippet inside a <code> tag — keep the panel narrow (the default 200-pixel min-width is usually enough) so the inline help reads as a footnote rather than competing with the form layout. Pair the popover with the Drivn Input and Label components for the rest of the field wiring.