Popover
A popover is a floating overlay element that appears next to a trigger element, providing additional contextual information or actions without navigating away from the current page.
Example
Features
Styleable– States for entry and exit animations are included for easy styling, and an optional arrow element can be rendered.Accessible– The trigger and popover are automatically associated semantically via ARIA. Content outside the popover is hidden from assistive technologies while it is open. The popover closes when interacting outside, or pressing the Escape key.Focus management– Focus is moved into the popover on mount, and restored to the trigger element on unmount.Positioning– The popover is positioned relative to the trigger element, and automatically flips and adjusts to avoid overlapping with the edge of the browser window.
Installation
Dialog. Make sure you have installed and configured it before using this component.Install following dependencies:
npm install react-aria-components tw-animate-css tailwindcss-react-aria-components class-variance-authority lucide-react clsx tailwind-merge motionAdd cn helper using clsx and twMerge for conditional class merging in Tailwind components.
Add a composeTailwindRenderProps helper at the @/lib/render-props file to combine static Tailwind classes with dynamic className values returned from render props in React Aria components.
Copy and paste the following code into your project.
npx @libravelui@latest add popoverAnatomy
import {
Popover,
PopoverTrigger,
PopoverContent,
PopoverTitle,
PopoverDescription,
} from "@/components/ui/core/popover";<Popover>
<PopoverTrigger>Trigger content goes here</PopoverTrigger>
<PopoverContent>
<PopoverTitle>Title goes here</PopoverTitle>
<PopoverDescription>Description goes here</PopoverDescription>
</PopoverContent>
</Popover>Another Examples
Direction/Position
The popover can be positioned in multiple directions around the trigger element, providing flexibility to adapt to different interface layouts and improve accessibility.
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 |
With Form
The popover contains an interactive form that allows users to enter and submit information directly within the popover, facilitating efficient data input without navigating away.
Props
Loading types…