Attaches a floating overlay to any trigger element. Unlike Modal, the rest of the page stays interactive. Supports four placements with automatic flip on collision, cross-axis alignment, click and hover trigger modes, and an optional bordered arrow.
{ Popover } from '/basix/js/popover.js'
Use placement to set the preferred side. The popover automatically flips to the opposite side if there is not enough viewport space.
The align option controls where the popover sits on the cross axis relative to the trigger.
triggerMode: 'click' (default) toggles on click and closes other open popovers. triggerMode: 'hover' opens on mouseenter with a 120 ms close delay.
Set arrow: false for contextual menus or other content where an arrow would look out of place. Combine with align: 'end' for dropdown-style menus.
| Option | Type | Default | Description |
|---|---|---|---|
content | string | — | HTML string rendered inside the popover. |
placement | top | bottom | left | right | 'bottom' | Preferred placement. Flips automatically on collision. |
align | start | center | end | 'center' | Cross-axis alignment relative to the trigger. |
offset | number | 8 | Gap in px between trigger and popover. |
arrow | boolean | true | Show a bordered arrow pointing at the trigger. |
triggerMode | click | hover | 'click' | How the popover is opened. |
closeOnOutsideClick | boolean | true | Close when clicking outside the popover and trigger. |
closeOnEscape | boolean | true | Close on Escape key. |
className | string | '' | Extra CSS class added to the popover element. |
onOpen | () => void | — | Callback fired after the popover opens. |
onClose | () => void | — | Callback fired after the popover closes. |
| Method / Property | Description |
|---|---|
open() | Opens the popover. |
close() | Closes the popover. |
toggle() | Toggles open/close. |
destroy() | Removes event listeners and closes the popover. |
isOpen | Boolean — whether the popover is currently open. |
Popover.closeAll() | Closes all currently open popovers. |