Overlays

Popover

A small, floating UI element that appears near a trigger to show contextual information or actions.

Basic

Popovers are small overlays that display additional information about an element when the user clicks on it.

Installation

If you hit any issues, make sure you check out the installation guide here for more information.

Composed components

When you install this component via the CLI, it automatically loads all composed components, so you don’t need to add them individually.

The Popover comes packed with several components to enhance functionality and provide a seamless experience.

ButtonButtons play a crucial role in functionality, whether for submitting a form or navigating to another page.
DialogA small, interactive UI element that overlays content to display important information or actions.

Manual installation

Make sure you also install the composed components and the required packages for the component to function properly.

Anatomy

Controlled

You can control the popover programmatically.

Overlay arrow

Popovers come with an arrow that points to the trigger element, but it’s hidden by default. To display it, pass the showArrow prop.

Placement

You can change the placement of the popover by passing the placement prop.

The list above shows the primary directions, but you can also use specific placements like bottom left or top right. Here are all the available placement options:

Primary DirectionPlacement
bottombottom, bottom left, bottom right, bottom start, bottom end
toptop, top left, top right, top start, top end
leftleft, left top, left bottom
startstart, start top, start bottom
rightright, right top, right bottom
endend, end top, end bottom

Custom close

You can easily close the popover by clicking outside of it, or add a custom close button inside using Popover.Close. Just make sure everything is wrapped inside a Dialog.

Popover trigger

All the examples above use <Button/> as the trigger, but what if you wanna switch it up, like using <Avatar/> instead? No sweat, just roll with PopoverTrigger like this:

Flexible blocks and templates
Use ready-made blocks to craft unique pages without starting from scratch.
blocks.intentui.com