Popover

Floating panel anchored to a trigger element that accepts slotted content

Demo

API

Tag

Name	Description
`<s-popover>`	Custom element that anchors a floating panel to a trigger, see slots.

Slots

Name	Required	Description
`trigger`		Element that opens the popover
`(default)`		Arbitrary HTML content rendered inside the floating panel

Attributes

Name	Value	Required	Description
`open`	Boolean attribute		Add this attribute to open the popover
`placement`	Floating UI placement, e.g. `bottom-start`, `top`, `right-start`		Preferred placement of the panel relative to the trigger. Defaults to `bottom-start`; flips and shifts to stay in the viewport.
`panel-role`	`dialog` \| `menu` \| `listbox` \| `tree` \| `grid`		ARIA role applied to the panel. Defaults to `dialog`.

Events

Name	Detail	Description
`s-open`	`{ id: string }` — the panel element's `id`	Fired when the popover opens
`s-close`	`{ id: string }` — the panel element's `id`	Fired when the popover closes

Demo

API

Tag

Name
`<SPopover>`

Slots

Name	Required	Description
`trigger`		Element that opens the popover
`(default)`		Arbitrary content rendered inside the floating panel

Props

Name	Value	Required	Description
`open`	Boolean		Controls the open state of the popover
`placement`	String		Preferred placement of the panel relative to the trigger. Defaults to `bottom-start`.
`panelRole`	`dialog` \| `menu` \| `listbox` \| `tree` \| `grid`		ARIA role applied to the panel. Defaults to `dialog`.

Events

Name	Description
`onS-open`	Handler fired when the popover opens
`onS-close`	Handler fired when the popover closes

Skylab React links

General information about using our React package

Guidelines

Accessibility

The element with slot="trigger" should be a <button>. The component sets aria-haspopup, aria-expanded, and aria-controls on the trigger automatically.

Give the panel content a meaningful aria-label (or aria-labelledby pointing at a title inside the panel). The panel's role is dialog by default; override it with the panel-role attribute when appropriate.

Content

<s-popover> accepts one element slotted as trigger and any content in the default slot. The default slot content is not styled beyond the panel container, so it accepts forms, menus, or arbitrary markup.

Positioning

The panel is positioned with Floating UI and flips or shifts to remain within the viewport. It is rendered to the end of document.body so it is not clipped by ancestor overflow or stacking contexts.

Design

Design resources can be found on the Skylab design documentation site: skylab.avalara.com