Popover
Hover or click to see more content, like popping open a tent, useful for additional info without leaving the context..
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.
Composed Components
When you plug this component from the CLI, it autoloads all the composed components. No need to toss 'em in one at a time.
The Popover's decked out with several components to make it bangin'.
Manual Installation
Sometimes, using the CLI is the way to go, so make sure you install the necessary dependencies for the components you want to use.
Anatomy
Import the components and use them as shown below, adapting the structure to fit each component.
Controlled
You can control the popover programmatically.
Overlay Arrow
The default has an arrow, but you can disable it by passing 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
The popover can be customized to include a custom close button.
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: