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
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.
This component comes packed with several components to enhance functionality and provide a seamless experience.
Manual installation
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 Direction | Placement |
|---|---|
bottom | bottom, bottom left, bottom right, bottom start, bottom end |
top | top, top left, top right, top start, top end |
left | left, left top, left bottom |
start | start, start top, start bottom |
right | right, right top, right bottom |
end | end, 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:
Design Intent UI