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.

For a layout demo or a settings panel that lets the user pick where a popover opens, render four Popover roots side by side with each position value. The component re-renders cleanly when the position prop changes because the value flows through the context to Popover.Content, which reads styles.positions[position] and applies the matching placement class. Wrap the four triggers in a flex items-center gap-3 row so the buttons sit in a tidy strip and the four popovers open in their distinct directions when clicked.

This shape doubles as a visual-regression test fixture — open each placement in turn and confirm the panel anchors to the expected side of the trigger. The default min-w-[200px] width means the right and left placements occupy a similar horizontal footprint to the top and bottom placements, so the four panels look balanced when compared. Pair the demo with the Popover docs page when teaching the placement model in a design system handbook.

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.