Popover
A floating content panel that appears relative to a trigger element. Supports click and hover activation, four positions, three alignment options, and smooth Framer Motion enter/exit animations.
Live Preview
Interact with the Popover component in real time. Adjust position and trigger type to see changes instantly.
1<Popover2trigger={<AidashButton>Click Me</AidashButton>}3position="bottom"4triggerOn="click"5>6<div>7 <p className="font-semibold">Popover Title</p>8 <p>This is the popover content.</p>9</div>10</Popover>Installation
Install the Aidash Components package using your preferred package manager.
$ pnpm add @aidash/componentsImport
Import the Popover component into your file.
import { Popover } from '@/components/aidash/popover';Basic Usage
The simplest way to use Popover with a click trigger.
1<Popover2trigger={<AidashButton>Open Popover</AidashButton>}3>4<div>5 <p className="font-semibold">Welcome</p>6 <p>This is a simple popover with text content.</p>7</div>8</Popover>Positions
Four positioning options to place the popover relative to the trigger element.
1<Popover trigger={<AidashButton>Top</AidashButton>} position="top">2<p>Popover on top</p>3</Popover>4 5<Popover trigger={<AidashButton>Bottom</AidashButton>} position="bottom">6<p>Popover on bottom</p>7</Popover>8 9<Popover trigger={<AidashButton>Left</AidashButton>} position="left">10<p>Popover on left</p>11</Popover>12 13<Popover trigger={<AidashButton>Right</AidashButton>} position="right">14<p>Popover on right</p>15</Popover>Alignment
Align the popover along the cross-axis with start, center, or end.
1<Popover trigger={<AidashButton>Start</AidashButton>} position="bottom" align="start">2<p>Aligned to start</p>3</Popover>4 5<Popover trigger={<AidashButton>Center</AidashButton>} position="bottom" align="center">6<p>Aligned to center</p>7</Popover>8 9<Popover trigger={<AidashButton>End</AidashButton>} position="bottom" align="end">10<p>Aligned to end</p>11</Popover>Hover Trigger
Open the popover on hover instead of click for lightweight interactions.
1<Popover2trigger={<AidashButton>Hover Me</AidashButton>}3triggerOn="hover"4position="bottom"5>6<div>7 <p className="font-semibold">Quick Info</p>8 <p>This popover appears on hover.</p>9</div>10</Popover>Rich Content
Popover content can include forms, buttons, and complex interactive layouts.
1<Popover2trigger={<AidashButton>Edit Settings</AidashButton>}3position="bottom"4align="start"5>6<div className="min-w-[260px] space-y-3">7 <p className="font-semibold">Notification Settings</p>8 <div className="space-y-2">9 <label className="flex items-center gap-2">10 <input type="checkbox" defaultChecked />11 Email notifications12 </label>13 <label className="flex items-center gap-2">14 <input type="checkbox" />15 Push notifications16 </label>17 </div>18 <div className="flex gap-2 pt-2 border-t">19 <AidashButton size="xs">Save</AidashButton>20 <AidashButton size="xs" variant="ghost">Cancel</AidashButton>21 </div>22</div>23</Popover>User Profile Card
A common pattern showing an avatar trigger with a user info popover.
1<Popover2trigger={3 <div className="w-10 h-10 rounded-full bg-brand-500 flex items-center justify-center text-white font-semibold">4 JD5 </div>6}7position="bottom"8align="end"9>10<div className="min-w-[240px]">11 <div className="flex items-center gap-3 mb-3">12 <div className="w-10 h-10 rounded-full bg-brand-500 ...">JD</div>13 <div>14 <p className="font-semibold">John Doe</p>15 <p className="text-xs text-muted">john@example.com</p>16 </div>17 </div>18 <div className="border-t pt-2 space-y-1">19 <button>Profile</button>20 <button>Settings</button>21 <button className="text-danger-500">Sign Out</button>22 </div>23</div>24</Popover>Accessibility
Built-in accessibility features for keyboard navigation and assistive technologies.
Focus Management
The popover trigger is focusable and can be activated with Enter or Space keys when using click trigger mode.
Escape to Close
Press ESC to dismiss the popover at any time when it is open.
Click Outside to Dismiss
Clicking anywhere outside the popover automatically closes it, following standard UI expectations.
ARIA Attributes
The trigger has role="button" and tabIndex=0 for keyboard accessibility. The arrow uses aria-hidden to hide decorative elements from screen readers.
1{/* Keyboard accessible popover */}2<Popover3trigger={<AidashButton aria-label="User menu">Menu</AidashButton>}4>5<nav>6 <a href="/profile">Profile</a>7 <a href="/settings">Settings</a>8</nav>9</Popover>10 11{/* ESC closes the popover automatically */}API Reference
Complete list of props accepted by Popover.
| Prop | Type | Default | Description |
|---|---|---|---|
| trigger | ReactNode | — | The element that triggers the popover |
| children | ReactNode | — | The popover content |
| position | 'top' | 'bottom' | 'left' | 'right' | 'bottom' | Position of the popover relative to the trigger |
| align | 'start' | 'center' | 'end' | 'center' | Alignment along the cross-axis |
| triggerOn | 'click' | 'hover' | 'click' | How the popover is activated |
| closeOnContentClick | boolean | false | Whether clicking inside the content closes the popover |
| className | string | '' | Additional CSS classes for the popover content |
pointer-events. Use closeOnContentClick if you want clicks inside the popover to dismiss it (useful for menu-style patterns).Related
Other components that work well alongside Popover.