Popover

A popover opens a panel next to its trigger, where users read details or use controls that belong to the trigger without leaving the page. A press on the trigger opens the popover and moves focus into it. The popover closes when users press the trigger again, press Escape, press outside of the popover or move focus out of it. The rest of the page stays usable while the popover is open. The trigger is a button without styles of its own, so the examples render it as a Button, and the content is 18rem wide.

UsageCopy Anchor Link

import { Button } from "@biem/ui/components/ui/button";
import {
	Popover,
	PopoverContent,
	PopoverDescription,
	PopoverHeader,
	PopoverTitle,
	PopoverTrigger,
} from "@biem/ui/components/ui/popover";

export function PopoverDefault() {
	return (
		<Popover>
			<PopoverTrigger render={<Button variant="outline"/>}>Reorder point</PopoverTrigger>
			<PopoverContent>
				<PopoverHeader>
					<PopoverTitle>Reorder point</PopoverTitle>
					<PopoverDescription>
						The store orders 24 cases from the warehouse when its stock falls to 6 cases.
					</PopoverDescription>
				</PopoverHeader>
			</PopoverContent>
		</Popover>
	);
}

ExamplesCopy Anchor Link

Top SideCopy Anchor Link

Triggers near the lower edge of a screen, such as the actions in a footer bar, leave little room below them. With side set to "top", the popover opens above its trigger instead. If the space above runs short, it moves below the trigger.

Right SideCopy Anchor Link

In a narrow column, such as a list of stores along the left edge of a screen, a popover finds more room beside its trigger than below it. Set to "right", side opens it toward the wider area of the screen, and the entries further down the list stay readable.

Bottom SideCopy Anchor Link

Reading runs from top to bottom, so details below a trigger follow the order in which users take in a screen. The popover takes this side by default, and side set to "bottom" states it explicitly. When the space below runs short, it opens above the trigger.

Left SideCopy Anchor Link

Actions at the end of a table row sit close to the right edge of a screen, where little room remains beside them. With side set to "left", the popover opens toward the middle of the screen, next to the row it belongs to.

Open on HoverCopy Anchor Link

Users who scan a screen want to see details without a press for each one. Once openOnHover is set on the trigger, the popover opens when the mouse pointer rests on the trigger, and it stays open while the pointer moves into the popover. Opened this way, it leaves focus where it is. On a touch screen, where no pointer rests on the trigger, a press opens the popover as before.

Open by DefaultCopy Anchor Link

A popover can draw attention to a detail the moment a page loads, such as a figure that has changed since the last visit. Through defaultOpen it is open at first render, and users close it like any other popover once they have read it.

ControlledCopy Anchor Link

In some workflows the application decides when the popover is open, for example to close it as soon as users have applied a change inside it. With open and onOpenChange, the application holds that state, so any part of the interface can open or close the popover.

Disabled TriggerCopy Anchor Link

Not every item has details at every moment, for example a product that has no sales history yet. Set on the trigger, disabled keeps users from opening the popover, while the trigger stays in view and shows where the details will appear once they exist.

API ReferenceCopy Anchor Link

PopoverCopy Anchor Link

PopoverTriggerCopy Anchor Link

PopoverContentCopy Anchor Link

PopoverHeaderCopy Anchor Link

PopoverHeader groups the title and the description. It renders a div and has no props of its own.

PopoverTitleCopy Anchor Link

PopoverDescriptionCopy Anchor Link