Popover
A positioned panel anchored to a trigger you supply.
import
import { Popover } from '@joshicodes/cock';Panel
The trigger snippet gets the attributes to spread, which keeps aria-expanded right.
Keyboard
- Esc
- Closes and returns focus to the trigger
Behaviour
- Renders into `<body>` and positions itself against its trigger, so an `overflow: hidden` ancestor or a scrolling table cannot clip it.
- Flips to the other side when the preferred one does not fit, and stays clear of the viewport edge.
- The trigger snippet receives the attributes to spread, which is what keeps `aria-expanded` correct.
API
Read out of the component sources at build time, so it matches the version you installed.
Every component also takes class, merged
through tailwind-merge so your utility wins.
Props of Popover
| Prop | Type | Default |
|---|---|---|
open bindable | boolean | false |
placement | Placement | 'bottom-start' |
offset | number | 8 |
class | string | — |
Snippets of Popover
| Snippet | Type | Default |
|---|---|---|
trigger required Spread the given attrs onto your own button. | Snippet<[TriggerAttrs]> | — |
children required | Snippet<[{ close: () => void }]> | — |