---
name: popover
category: overlays
summary: "Interactive floating panel — like an interactive tooltip"
subpath: "@42/core/popover"
---

Interactive floating panel (links/forms/buttons inside). Toggles on click,
manages focus, closes on outside-click / Escape, positions with floating-ui.
Like a tooltip but interactive.

```html
<div data-c42-popover>
  <button data-c42-popover-trigger>Open</button>
  <div data-c42-popover-content>
    <a href="#">A link</a>
    <button>An action</button>
  </div>
</div>
```

```ts
import { Popover } from '@42/core/popover';
const p = new Popover(root, { placement: 'bottom', trapFocus: false });
p.toggle();
```

Options: `placement` (default 'bottom'), `offset` (default 8), `autoFocus` (default true), `trapFocus` (default false), `closeOnOutsideClick` (default true)
Methods: `openPopover()`, `close()`, `toggle()`, `isOpen`
Events: `popover:open`, `popover:close`