Rich interactive popovers with header/body/footer slots, smart auto-positioning, dismiss-on-outside/Esc, and full focus management.
<link rel="stylesheet" href="https://cdn.get-set.it/gs-popover/latest/gs-popover.min.css"> <script src="https://cdn.get-set.it/gs-popover/latest/gs-popover.min.js"></script>
import Popover from '@get-set/gs-popover'; export default function App() { return ( <Popover> <div className="content">Your Popover content</div> </Popover> ); }
A real GSPopover — placement flips automatically near edges.
| Option | Type | Default | Description |
|---|---|---|---|
| reference | string | none | Reference. |
| trigger | HandlerTarget | none | Element(s) the popover anchors to / is triggered by. selector | HTMLElement | React ref. In React this defaults to the wrapped child element. |
| closeHandler | HandlerTarget | none | Element(s) inside the content that close the popover on click. |
| placement | GSPopoverPlacement | 'bottom' | Placement relative to the trigger. Default: 'bottom'. |
| flip | boolean | true | Auto-flip to the opposite side when there is not enough room. Default: true. |
| shift | boolean | true | Shift along the cross axis to keep the popover inside the viewport. Default: true. |
| offset | number | GSPopoverOffset | 8 | Custom offset between the trigger and the popover. |
| boundaryPadding | number | 8 | Viewport padding kept around the popover when flipping/shifting. Default: 8. |
| sameWidth | boolean | false | Match the popover width to the trigger width (menu-style). Default: false. |
| reposition | boolean | true | Keep the popover positioned on scroll / resize. Default: true. |
| trigger_mode | GSPopoverTrigger | 'click' | How the popover opens. Default: 'click'. |
| openDelay | number | 0 | Delay (ms) before opening on hover/focus. Default: 0. |
| closeDelay | number | 100 | Delay (ms) before closing on hover-leave/blur. Default: 100. |
| interactive | boolean | true | Keep the popover open while the pointer moves from the trigger onto the popover (interactive hover). Default: true. |
| title | string | none | Header title. When set (with no `header`), renders the header region. |
| header | string | none | Full header content (HTML string). Overrides `title` when set. |
| content | string | none | Body content (HTML string). React uses children instead. |
| footer | string | false | none | Footer content (HTML string). `false` = no footer. |
| arrow | boolean | true | Show the arrow pointing at the trigger. Default: true. |
| closeButton | boolean | false | Show the built-in × close button in the header. Default: false. |
| maxWidth | number | string | 320 | Clamp the popover width. Number = px. Default: 320. |
| minWidth | number | string | none | Lower bound on the popover width. Number = px. |
| dismissOnOutsideClick | boolean | true | Close when clicking outside the popover + trigger. Default: true. |
| dismissOnEsc | boolean | true | Close when Escape is pressed. Default: true. |
| animation | GSPopoverAnimation | false | 'scale' | Entrance animation name from the catalog. `false` disables all motion. Default: 'scale'. |
| exitAnimation | GSPopoverAnimation | false | none | Separate exit animation. Mirrors `animation` when omitted. |
| animationDuration | number | { enter?: number; exit?: number } | 200 | Animation duration in ms. A number applies to both phases; an object sets each independently. Default: 200. |
| animationEasing | string | 'cubic-bezier(.16,1,.3,1)' | CSS easing applied to the enter/exit animation. |
| reducedMotion | 'auto' | boolean | 'auto' | Honor `prefers-reduced-motion`. `'auto'` follows the OS setting; `true` always reduces; `false` never reduces. Default: 'auto'. |
| backdrop | boolean | false | Render a dimming backdrop behind the popover. Default: false. |
| backdropColor | string | none | Backdrop color. |
| backdropBlur | boolean | number | string | false | Backdrop blur. `true`=4px; number=px; string=raw CSS length. Default: false. |
| trapFocus | boolean | false | Trap Tab focus inside the popover while open. Default: false. |
| autofocus | boolean | false | Auto-focus the first focusable element on open. Default: false. |
| initialFocus | HandlerTarget | false | none | Explicit element to focus on open. `false` focuses the popover container. |
| returnFocus | boolean | true | Restore focus to the trigger on close. Default: true. |
| theme | GSPopoverTheme | 'auto' | Visual theme. `auto` follows prefers-color-scheme. Default: 'auto'. |
| accentColor | string | none | Accent color (CSS var --gsp-accent). |
| rtl | boolean | false | Right-to-left layout. Default: false. |
| customClass | GSPopoverCustomClass | none | Per-part class overrides. |
| className | string | none | Extra class name applied to the popover root. |
| role | string | 'dialog' | ARIA role for the popover. Default: 'dialog'. |
Header, body and footer content regions.
Flip and shift to stay inside the viewport.
Close on outside click, Escape or blur.
Traps and restores focus around the popover.