Popover

A popover shows extra content on a temporary surface, opened from a control and dismissed by clicking away. The open action decides how readers summon it: a click suits a settings panel, and hover and focus suit a quick peek. Each button below opens a different popover, so try one with the pointer and another with the keyboard.

Roast notes

Dark chocolate, orange peel, and a whisper of toasted hazelnut.

Brew guide

Ninety seconds off the boil, then one patient stir.

Grind

Medium-fine, about the texture of coarse sand.

Origin

One farm, 1,800 meters up, picked by hand in March.

Milk

Oat, whole, or none at all. The coffee will not judge.

Sweetness

Half a spoon of honey changes everything.

Water

Filtered, and just under boiling at 94 degrees.

Roaster

Small batches, roasted on Tuesdays, shipped by Thursday.

Cup size

Small, medium, or the one with the handle.

A bag every two weeks, and you can skip any of them.

Storage

Airtight, dark, and nowhere near the stove.

Decaf?

Yes, we have it. No, we will not tell your friends.

Allergens

Roasted in a facility that also handles almonds.

Tasting flight

Three small cups, three origins, one good afternoon.

Rinse the paper filter first. It is the cheapest upgrade there is.

Start the clock when the water first touches the grounds.

Every bag traces to one farm, named on the label.

Save a blend and reorder it in one press.

This week: a washed Ethiopian that tastes like blueberry tea.

Bags are compostable. The little valve is not, sorry.

We will write the card, and spell your friend's name correctly.

Ask a human: a person answers within the hour.

Reference docs⁠

Blazor

React

Web

Overview

Examples

API

Styling

Accessibility

Choosing a pop-up surface⁠

Five kinds of surface open over the page for a moment. Each suits a different job:

Dialog: a question the reader must answer before going on, such as Discard unsaved changes?
Popover: extra content opened from a control and dismissed by clicking away, such as a small settings panel.
Menu: a short list of commands opened from a button, such as Rename, Duplicate, Delete.
Plain tooltip: a short label shown on hover or focus, such as what an icon button does.
Rich tooltip: a heading, a few lines of text and an optional action shown next to the element it describes, such as what a new feature does.

Three jobs belong elsewhere. A message about something that just happened is a toast, content that stays on the page is a card, and a short set of creation actions opened from a floating button is a FAB menu.

Choosing an open action⁠

Two open actions set how readers summon a popover:

Click: for content the reader asks for on purpose, such as a settings panel or a short form. It is the default.
Hover and focus: for a quick peek, such as a preview or a few lines of detail. The surface opens after a short pause and closes again when the pointer or focus moves away.

Built in⁠

A slotted anchor opens the popover; with none, an icon button fills the slot (anchor, external-anchor).
The surface opens below the anchor and flips to the other side when there is no room.
A click outside, or focus leaving, closes it; stay-open-on-outside-click and stay-open-on-focusout opt out.
Focus returns to the control that was focused before it opened, unless skip-restore-focus is set.
Four animations set how it appears, and animation takes its default from your style configuration.
A cancelable beforetoggle event fires before every open and close.

Hidden content renders when first shown⁠

A popover keeps its content hidden until your code or the user opens it. Each opening starts like the first, with the content scrolled to the top, and your own content stays as it was, so a half-filled field is still half filled. Wait for updateComplete and the hidden content has rendered, so your code can reach it at once. See Hidden content renders when first shown.

Using popovers well⁠

Slot your own anchor and label it for what the popover holds, in your words.

Anchor⁠

A popover opens from its anchor: the element in the anchor slot, or the element whose id anchor names. Set external-anchor when the anchor sits outside the popover, so the popover aligns to it. With neither, a built-in icon button opens it.

Assign an element to anchorElement from code to anchor to an element an id cannot find.

Animation⁠

animation sets how the surface appears and disappears, from none, fade, faded-slide, and expand. Omit it and the popover takes its animation from your style configuration, which is faded-slide unless you have changed it.

Open action⁠

open-action is click by default. With hover-focus, hovering or focusing the popover opens it after hover-open-delay milliseconds, and leaving closes it after hover-close-delay; both default to 400. Raise them to make a peek harder to trigger by accident.

Staying open⁠

A click outside the popover, or focus leaving it, closes it. stay-open-on-outside-click and stay-open-on-focusout each turn one of those off, and open then sets the state from code. With both set, only your own control closes the popover.

Set stay-open-on-outside-click only for a surface your page closes itself. It also stops the Escape key closing the popover from outside it.

Focus⁠

A popover leaves focus where it is when it opens. Set apply-autofocus and the popover moves focus to the first focusable element inside it instead. On close, focus returns to the element that had it before the popover opened; skip-restore-focus leaves it where it lands.

In a dialog⁠

A dialog inerts the page and locks its scrolling. Set fixed on a popover inside one, so the surface stays with its anchor instead of scrolling with the page. Escape closes the popover first and leaves the dialog open.

Properties⁠

Property	Attribute	Type	Description
`anchor`	`anchor`	`string`	The ID of the element to align to, in the same page or component, in place of the element in the `anchor` slot. It overrides `anchorElement`. See Anchor.
`anchorElement`		`HTMLElement`	The element it aligns to. If `anchor` is set to a non-empty idref string, this resolves to the element with the given id in the same page or component; otherwise to the element assigned to this property, and failing that to its own slotted anchor.Assigning an element is the only way to anchor to one that an id cannot find, such as an element inside another component. Assigning `null` clears such an assignment; it does not clear the slotted anchor. See Anchor.
`animation`	`animationnone`, `fade`, `faded-slide`, `expand`	`PopoverAnimationPopoverAnimation.None`, `.Fade`, `.FadedSlide`, `.Expand`default `PopoverAnimation.FadedSlide`, from the style configuration	The opening and closing animation. See Animation.
`applyAutofocus`	`apply-autofocus`	`boolean`default `false`	When set to true, the popover will automatically focus the element within the popover that has an `autofocus` attribute. See Focus.
`externalAnchor`	`external-anchor`	`boolean`default `false`	Set this when the anchor is elsewhere rather than in the `anchor` slot. It then aligns to the element named by `anchor` or assigned to `anchorElement`. See Anchor.
`fixed`	`fixed`	`boolean`default `false`	Keeps it from scrolling with the page. Use it inside a dialog or another element that does not scroll. See In a dialog.
`hoverCloseDelay`	`hover-close-delay`	`number`default `400`	The delay between the pointer leaving it and it closing, in milliseconds. It applies when `open-action` is `hover-focus`. See Open action.
`hoverOpenDelay`	`hover-open-delay`	`number`default `400`	The delay between the pointer entering the anchor and it opening, in milliseconds. It applies when `open-action` is `hover-focus`. See Open action.
`maskContent`	`mask-content`	`boolean`	Clips the content to the component's shape, so anything that extends past a rounded corner is cut off.
`open`	`open`	`boolean`default `false`	Shows it. An alternative to the `show()` and `hide()` methods. See Staying open.
`openAction`	`open-actionclick`, `hover-focus`	`PopoverOpenActionPopoverOpenAction.Click`, `.HoverFocus`default `PopoverOpenAction.Click`	The action that opens it: `click` opens it when the anchor is clicked, `hover-focus` when the pointer or focus reaches the anchor. See Open action.
`skipRestoreFocus`	`skip-restore-focus`	`boolean`default `false`	After closing, does not return focus to the element that was focused before it opened. See Focus.
`stayOpenOnFocusout`	`stay-open-on-focusout`	`boolean`default `false`	Stays open when focus moves outside it. Without this, it closes when focus leaves it, and focus stays where the user moved it. See Staying open.
`stayOpenOnOutsideClick`	`stay-open-on-outside-click`	`boolean`default `false`	Stays open when the user clicks outside it, or presses Escape while focus is outside it. Clicking outside may still close it by moving focus away: see `stayOpenOnFocusout`. See Staying open.

Slots⁠

Slot	Description
`anchor`	The element that opens the popover when activated, typically a `cw-button` or `cw-icon-button`.
(default)	Content to be shown in the popover.

Content in the anchor slot replaces the icon button the popover renders there by default.

Events⁠

Event	Type	Detail	Description
`beforetoggle`	`ToggleEvent`	—	Fired before the opening or closing animation begins, whenever `open` is about to change. Cancelable: calling `preventDefault()` leaves the popover in its current state. `newState` is `"open"` or `"closed"`. It bubbles, is composed, and is cancelable.
`toggle`	`ToggleEvent`	—	Fired once the popover has opened or closed, after any animations. `newState` is `"open"` or `"closed"`. It bubbles and is composed.

Methods⁠

Method	Returns	Description
`hide()`	`void`	Closes it, as setting `open` to false does.
`show()`	`void`	Opens it, as setting `open` to true does.

Props⁠

Prop	Type	Description
`anchor`	`string`	The ID of the element to align to, in the same page or component, in place of the element in the `slot="anchor"` child. It overrides `anchorElement`. See Anchor.
`anchorElement`	`HTMLElement`	The element it aligns to. If `anchor` is set to a non-empty idref string, this resolves to the element with the given id in the same page or component; otherwise to the element assigned to this property, and failing that to its own slotted anchor.Assigning an element is the only way to anchor to one that an id cannot find, such as an element inside another component. Assigning `null` clears such an assignment; it does not clear the slotted anchor. See Anchor.
`animation`	`PopoverAnimationTypePopoverAnimation.None`, `.Fade`, `.FadedSlide`, `.Expand`default `PopoverAnimation.FadedSlide`, from the style configuration	The opening and closing animation. See Animation.
`applyAutofocus`	`boolean`default `false`	When set to true, the popover will automatically focus the element within the popover that has an `autofocus` attribute. See Focus.
`externalAnchor`	`boolean`default `false`	Set this when the anchor is elsewhere rather than in the `slot="anchor"` child. It then aligns to the element named by `anchor` or assigned to `anchorElement`. See Anchor.
`fixed`	`boolean`default `false`	Keeps it from scrolling with the page. Use it inside a dialog or another element that does not scroll. See In a dialog.
`hoverCloseDelay`	`number`default `400`	The delay between the pointer leaving it and it closing, in milliseconds. It applies when `openAction` is `hover-focus`. See Open action.
`hoverOpenDelay`	`number`default `400`	The delay between the pointer entering the anchor and it opening, in milliseconds. It applies when `openAction` is `hover-focus`. See Open action.
`maskContent`	`boolean`	Clips the content to the component's shape, so anything that extends past a rounded corner is cut off.
`open`	`boolean`default `false`	Shows it. An alternative to the `show()` and `hide()` methods. See Staying open.
`openAction`	`PopoverOpenActionTypePopoverOpenAction.Click`, `.HoverFocus`default `PopoverOpenAction.Click`	The action that opens it: `click` opens it when the anchor is clicked, `hover-focus` when the pointer or focus reaches the anchor. See Open action.
`skipRestoreFocus`	`boolean`default `false`	After closing, does not return focus to the element that was focused before it opened. See Focus.
`stayOpenOnFocusout`	`boolean`default `false`	Stays open when focus moves outside it. Without this, it closes when focus leaves it, and focus stays where the user moved it. See Staying open.
`stayOpenOnOutsideClick`	`boolean`default `false`	Stays open when the user clicks outside it, or presses Escape while focus is outside it. Clicking outside may still close it by moving focus away: see `stayOpenOnFocusout`. See Staying open.

Children⁠

Child	Description
a child with `slot="anchor"`	The element that opens the popover when activated, typically a `CrButton` or `CrIconButton`.
`children`	Content to be shown in the popover.

Content in the anchor slot replaces the icon button the popover renders there by default.

Events⁠

Prop	Argument	Description
`onBeforeToggle`	`ToggleEvent`	Fired before the opening or closing animation begins, whenever `open` is about to change. Cancelable: calling `preventDefault()` leaves the popover in its current state. `newState` is `"open"` or `"closed"`. It bubbles, is composed, and is cancelable.
`onToggle`	`ToggleEvent`	Fired once the popover has opened or closed, after any animations. `newState` is `"open"` or `"closed"`. It bubbles and is composed.

Methods⁠

Call these on the element the ref holds.

Method	Returns	Description
`hide()`	`void`	Closes it, as setting `open` to false does.
`show()`	`void`	Opens it, as setting `open` to true does.

Parameters⁠

Parameter	Type	Description
`Anchor`	`string?`	The ID of the element to align to, in the same page or component, in place of the element in the `AnchorContent` render fragment. It overrides `AnchorElement`. See Anchor.
`AnchorElement`	`ElementReference?`	The element it aligns to. If `Anchor` is set to a non-empty idref string, this resolves to the element with the given id in the same page or component; otherwise to the element assigned to this property, and failing that to its own slotted anchor.Assigning an element is the only way to anchor to one that an id cannot find, such as an element inside another component. Assigning `null` clears such an assignment; it does not clear the slotted anchor. See Anchor.
`Animation`	`PopoverAnimation?PopoverAnimation.None`, `.Fade`, `.FadedSlide`, `.Expand`default `PopoverAnimation.FadedSlide`, from the style configuration	The opening and closing animation. See Animation.
`ApplyAutofocus`	`bool?`default `false`	When set to true, the popover will automatically focus the element within the popover that has an `autofocus` attribute. See Focus.
`ExternalAnchor`	`bool?`default `false`	Set this when the anchor is elsewhere rather than in the `AnchorContent` render fragment. It then aligns to the element named by `Anchor` or assigned to `AnchorElement`. See Anchor.
`Fixed`	`bool?`default `false`	Keeps it from scrolling with the page. Use it inside a dialog or another element that does not scroll. See In a dialog.
`HoverCloseDelay`	`int?`default `400`	The delay between the pointer leaving it and it closing, in milliseconds. It applies when `OpenAction` is `hover-focus`. See Open action.
`HoverOpenDelay`	`int?`default `400`	The delay between the pointer entering the anchor and it opening, in milliseconds. It applies when `OpenAction` is `hover-focus`. See Open action.
`MaskContent`	`bool?`	Clips the content to the component's shape, so anything that extends past a rounded corner is cut off.
`Open`	`bool?`default `false`	Shows it. An alternative to the `show()` and `hide()` methods. See Staying open.
`OpenAction`	`PopoverOpenAction?PopoverOpenAction.Click`, `.HoverFocus`default `PopoverOpenAction.Click`	The action that opens it: `click` opens it when the anchor is clicked, `hover-focus` when the pointer or focus reaches the anchor. See Open action.
`SkipRestoreFocus`	`bool?`default `false`	After closing, does not return focus to the element that was focused before it opened. See Focus.
`StayOpenOnFocusout`	`bool?`default `false`	Stays open when focus moves outside it. Without this, it closes when focus leaves it, and focus stays where the user moved it. See Staying open.
`StayOpenOnOutsideClick`	`bool?`default `false`	Stays open when the user clicks outside it, or presses Escape while focus is outside it. Clicking outside may still close it by moving focus away: see `StayOpenOnFocusout`. See Staying open.

Render fragments⁠

Once you write AnchorContent or any other fragment as a child element, the main content must go in an explicit <ChildContent> too; markup beside <AnchorContent> is a compile error. Here ChildContent is: Content to be shown in the popover.

<CbPopover>
    <AnchorContent><CbButton>Open</CbButton></AnchorContent>
    <ChildContent>Main content</ChildContent>
</CbPopover>

content_copy

Parameter	Type	Description
`AnchorContent`	`RenderFragment?`	The element that opens the popover when activated, typically a `CbButton` or `CbIconButton`.
`ChildContent`	`RenderFragment?`	Content to be shown in the popover.

Content in the anchor slot replaces the icon button the popover renders there by default.

Event callbacks⁠

Parameter	Type	Description
`OnBeforeToggle`	`EventCallback<ToggleEventArgs>`	Fired before the opening or closing animation begins, whenever `Open` is about to change. Cancelable: calling `preventDefault()` leaves the popover in its current state. `newState` is `"open"` or `"closed"`. It bubbles, is composed, and is cancelable.
`OnToggle`	`EventCallback<ToggleEventArgs>`	Fired once the popover has opened or closed, after any animations. `newState` is `"open"` or `"closed"`. It bubbles and is composed.

Inputs⁠

Input	Type	Description
`anchor`	`string`	The ID of the element to align to, in the same page or component, in place of the element in the `anchor` slot. It overrides `anchorElement`. See Anchor.
`anchorElement`	`HTMLElement`	The element it aligns to. If `anchor` is set to a non-empty idref string, this resolves to the element with the given id in the same page or component; otherwise to the element assigned to this property, and failing that to its own slotted anchor.Assigning an element is the only way to anchor to one that an id cannot find, such as an element inside another component. Assigning `null` clears such an assignment; it does not clear the slotted anchor. See Anchor.
`animation`	`PopoverAnimationTypePopoverAnimation.None`, `.Fade`, `.FadedSlide`, `.Expand`default `PopoverAnimation.FadedSlide`, from the style configuration	The opening and closing animation. See Animation.
`applyAutofocus`	`boolean`default `false`	When set to true, the popover will automatically focus the element within the popover that has an `autofocus` attribute. See Focus.
`externalAnchor`	`boolean`default `false`	Set this when the anchor is elsewhere rather than in the `anchor` slot. It then aligns to the element named by `anchor` or assigned to `anchorElement`. See Anchor.
`fixed`	`boolean`default `false`	Keeps it from scrolling with the page. Use it inside a dialog or another element that does not scroll. See In a dialog.
`hoverCloseDelay`	`number`default `400`	The delay between the pointer leaving it and it closing, in milliseconds. It applies when `openAction` is `hover-focus`. See Open action.
`hoverOpenDelay`	`number`default `400`	The delay between the pointer entering the anchor and it opening, in milliseconds. It applies when `openAction` is `hover-focus`. See Open action.
`maskContent`	`boolean`	Clips the content to the component's shape, so anything that extends past a rounded corner is cut off.
`open`	`boolean`default `false`	Shows it. An alternative to the `show()` and `hide()` methods. See Staying open.
`openAction`	`PopoverOpenActionTypePopoverOpenAction.Click`, `.HoverFocus`default `PopoverOpenAction.Click`	The action that opens it: `click` opens it when the anchor is clicked, `hover-focus` when the pointer or focus reaches the anchor. See Open action.
`skipRestoreFocus`	`boolean`default `false`	After closing, does not return focus to the element that was focused before it opened. See Focus.
`stayOpenOnFocusout`	`boolean`default `false`	Stays open when focus moves outside it. Without this, it closes when focus leaves it, and focus stays where the user moved it. See Staying open.
`stayOpenOnOutsideClick`	`boolean`default `false`	Stays open when the user clicks outside it, or presses Escape while focus is outside it. Clicking outside may still close it by moving focus away: see `stayOpenOnFocusout`. See Staying open.

Content projection⁠

Content	Description
an element with `slot="anchor"`	The element that opens the popover when activated, typically a `CaButton` or `CaIconButton`.
content with no `slot`	Content to be shown in the popover.

Content in the anchor slot replaces the icon button the popover renders there by default.

Outputs⁠

Output	Event	Description
`cwBeforeToggle`	`ToggleEvent`	Fired before the opening or closing animation begins, whenever `open` is about to change. Cancelable: calling `preventDefault()` leaves the popover in its current state. `newState` is `"open"` or `"closed"`. It bubbles, is composed, and is cancelable.
`cwToggle`	`ToggleEvent`	Fired once the popover has opened or closed, after any animations. `newState` is `"open"` or `"closed"`. It bubbles and is composed.

Methods⁠

Call these on the element the ref holds.

Method	Returns	Description
`hide()`	`void`	Closes it, as setting `open` to false does.
`show()`	`void`	Opens it, as setting `open` to true does.

Props⁠

Prop	Type	Description
`anchor`	`string`	The ID of the element to align to, in the same page or component, in place of the element in the `anchor` slot. It overrides `anchorElement`. See Anchor.
`anchorElement`	`HTMLElement`	The element it aligns to. If `anchor` is set to a non-empty idref string, this resolves to the element with the given id in the same page or component; otherwise to the element assigned to this property, and failing that to its own slotted anchor.Assigning an element is the only way to anchor to one that an id cannot find, such as an element inside another component. Assigning `null` clears such an assignment; it does not clear the slotted anchor. See Anchor.
`animation`	`PopoverAnimationTypePopoverAnimation.None`, `.Fade`, `.FadedSlide`, `.Expand`default `PopoverAnimation.FadedSlide`, from the style configuration	The opening and closing animation. See Animation.
`applyAutofocus`	`boolean`default `false`	When set to true, the popover will automatically focus the element within the popover that has an `autofocus` attribute. See Focus.
`externalAnchor`	`boolean`default `false`	Set this when the anchor is elsewhere rather than in the `anchor` slot. It then aligns to the element named by `anchor` or assigned to `anchorElement`. See Anchor.
`fixed`	`boolean`default `false`	Keeps it from scrolling with the page. Use it inside a dialog or another element that does not scroll. See In a dialog.
`hoverCloseDelay`	`number`default `400`	The delay between the pointer leaving it and it closing, in milliseconds. It applies when `openAction` is `hover-focus`. See Open action.
`hoverOpenDelay`	`number`default `400`	The delay between the pointer entering the anchor and it opening, in milliseconds. It applies when `openAction` is `hover-focus`. See Open action.
`maskContent`	`boolean`	Clips the content to the component's shape, so anything that extends past a rounded corner is cut off.
`open`	`boolean`default `false`	Shows it. An alternative to the `show()` and `hide()` methods. See Staying open.
`openAction`	`PopoverOpenActionTypePopoverOpenAction.Click`, `.HoverFocus`default `PopoverOpenAction.Click`	The action that opens it: `click` opens it when the anchor is clicked, `hover-focus` when the pointer or focus reaches the anchor. See Open action.
`skipRestoreFocus`	`boolean`default `false`	After closing, does not return focus to the element that was focused before it opened. See Focus.
`stayOpenOnFocusout`	`boolean`default `false`	Stays open when focus moves outside it. Without this, it closes when focus leaves it, and focus stays where the user moved it. See Staying open.
`stayOpenOnOutsideClick`	`boolean`default `false`	Stays open when the user clicks outside it, or presses Escape while focus is outside it. Clicking outside may still close it by moving focus away: see `stayOpenOnFocusout`. See Staying open.

Slots⁠

Slot	Description
`default`	Content to be shown in the popover.
`anchor`	The element that opens the popover when activated, typically a `CvButton` or `CvIconButton`.

Content in the anchor slot replaces the icon button the popover renders there by default.

Events⁠

Event	Type	Description
`beforeToggle`	`ToggleEvent`	Fired before the opening or closing animation begins, whenever `open` is about to change. Cancelable: calling `preventDefault()` leaves the popover in its current state. `newState` is `"open"` or `"closed"`. It bubbles, is composed, and is cancelable.
`toggle`	`ToggleEvent`	Fired once the popover has opened or closed, after any animations. `newState` is `"open"` or `"closed"`. It bubbles and is composed.

Methods⁠

Call these on the element the ref holds.

Method	Returns	Description
`hide()`	`void`	Closes it, as setting `open` to false does.
`show()`	`void`	Opens it, as setting `open` to true does.

Props⁠

Prop	Type	Description
`anchor`	`string`	The ID of the element to align to, in the same page or component, in place of the element in the `anchorSnippet` snippet. It overrides `anchorElement`. See Anchor.
`anchorElement`	`HTMLElement`	The element it aligns to. If `anchor` is set to a non-empty idref string, this resolves to the element with the given id in the same page or component; otherwise to the element assigned to this property, and failing that to its own slotted anchor.Assigning an element is the only way to anchor to one that an id cannot find, such as an element inside another component. Assigning `null` clears such an assignment; it does not clear the slotted anchor. See Anchor.
`animation`	`PopoverAnimationTypePopoverAnimation.None`, `.Fade`, `.FadedSlide`, `.Expand`default `PopoverAnimation.FadedSlide`, from the style configuration	The opening and closing animation. See Animation.
`applyAutofocus`	`boolean`default `false`	When set to true, the popover will automatically focus the element within the popover that has an `autofocus` attribute. See Focus.
`externalAnchor`	`boolean`default `false`	Set this when the anchor is elsewhere rather than in the `anchorSnippet` snippet. It then aligns to the element named by `anchor` or assigned to `anchorElement`. See Anchor.
`fixed`	`boolean`default `false`	Keeps it from scrolling with the page. Use it inside a dialog or another element that does not scroll. See In a dialog.
`hoverCloseDelay`	`number`default `400`	The delay between the pointer leaving it and it closing, in milliseconds. It applies when `openAction` is `hover-focus`. See Open action.
`hoverOpenDelay`	`number`default `400`	The delay between the pointer entering the anchor and it opening, in milliseconds. It applies when `openAction` is `hover-focus`. See Open action.
`maskContent`	`boolean`	Clips the content to the component's shape, so anything that extends past a rounded corner is cut off.
`open`	`boolean`default `false`	Shows it. An alternative to the `show()` and `hide()` methods. See Staying open.
`openAction`	`PopoverOpenActionTypePopoverOpenAction.Click`, `.HoverFocus`default `PopoverOpenAction.Click`	The action that opens it: `click` opens it when the anchor is clicked, `hover-focus` when the pointer or focus reaches the anchor. See Open action.
`skipRestoreFocus`	`boolean`default `false`	After closing, does not return focus to the element that was focused before it opened. See Focus.
`stayOpenOnFocusout`	`boolean`default `false`	Stays open when focus moves outside it. Without this, it closes when focus leaves it, and focus stays where the user moved it. See Staying open.
`stayOpenOnOutsideClick`	`boolean`default `false`	Stays open when the user clicks outside it, or presses Escape while focus is outside it. Clicking outside may still close it by moving focus away: see `stayOpenOnFocusout`. See Staying open.

Snippets⁠

Snippet	Description
`anchorSnippet`	The element that opens the popover when activated, typically a `CsButton` or `CsIconButton`.
`children`	Content to be shown in the popover.

Content in the anchor slot replaces the icon button the popover renders there by default.

Events⁠

Prop	Type	Description
`onBeforeToggle`	`ToggleEvent`	Fired before the opening or closing animation begins, whenever `open` is about to change. Cancelable: calling `preventDefault()` leaves the popover in its current state. `newState` is `"open"` or `"closed"`. It bubbles, is composed, and is cancelable.
`onToggle`	`ToggleEvent`	Fired once the popover has opened or closed, after any animations. `newState` is `"open"` or `"closed"`. It bubbles and is composed.

Methods⁠

Call these on the element the ref holds.

Method	Returns	Description
`hide()`	`void`	Closes it, as setting `open` to false does.
`show()`	`void`	Opens it, as setting `open` to true does.

A value is what the token defaults to; selecting it copies the token's name.

Tokens⁠

Token	Value
`--ct-popover-container-color`	`--ct-sys-color-surface-container` `--ct-popover-container-color`
`--ct-popover-container-elevation`	`--ct-sys-elevation-level2` `--ct-popover-container-elevation`
`--ct-popover-container-shadow-color`	`--ct-sys-color-shadow` `--ct-popover-container-shadow-color`
`--ct-popover-outline-color`	`transparent` `--ct-popover-outline-color`
`--ct-popover-outline-opacity`	`1` `--ct-popover-outline-opacity`
`--ct-popover-outline-width`	`0px` `--ct-popover-outline-width`
`--ct-popover-position-area`	`block-end span-inline-end` `--ct-popover-position-area`
`--ct-popover-scrollbar-color`	`--ct-sys-color-on-surface-variant` `--ct-popover-scrollbar-color`
`--ct-popover-scrollbar-width`	`thin` `--ct-popover-scrollbar-width`

Names and states⁠

A popover's surface is announced with no role, so it follows no single WAI-ARIA Authoring Practices pattern; the Disclosure pattern is the closest fit for the anchor.

The anchor names itself. A slotted button is named by its own label, and the built-in icon button by its English title, "Open Popover".
The popover writes no aria-expanded on its anchor. Set it yourself, and keep it in step with open from the toggle event.
An aria-label on a popover names nothing.
Screen readers find a close control, labeled by the localized word "Close", at the start of the surface. It is not a Tab stop, and it is absent while stay-open-on-outside-click is set.
Opening does not move focus unless apply-autofocus is set and an element inside has autofocus. Choose a dialog for content that must hold focus.

Keyboard and focus⁠

Key	Action
Tab	Moves along the normal tab order, from the anchor into the open surface and on past it
Enter	Activates the anchor
Space	Activates the anchor
Escape	Closes the topmost open popover, wherever focus is

Focus never gets trapped: the page stays interactive, and Tab leaves the surface freely.
Focus leaving the surface closes it, and focus carries on to the next control. Closing any other way returns focus to the element that had it before the popover opened.
With hover-focus, focusing the popover opens it after hover-open-delay, and moving focus away closes it after hover-close-delay.
The popover draws no focus ring of its own. The anchor and the controls inside draw theirs.
With stay-open-on-outside-click set, Escape closes the popover only while focus is inside it.

Pointer and touch⁠

The popover adds no target of its own; the anchor sets it. Check the anchor you slot against the 24 by 24 pixel minimum of WCAG 2.5.8 Target Size (Minimum) (AA).
A click outside the surface closes it, unless stay-open-on-outside-click is set. The Examples tab shows both.

Display settings⁠

Forced colors: the surface takes a 1 pixel solid CanvasText border.
Reduced motion: the animation plays as set, even for readers who ask for less motion. Choose none for those readers.
Right-to-left: the surface opens below the anchor and extends toward the end of the inline axis, so it mirrors with the writing direction.

Standards⁠

With its built-in anchor and its defaults, a popover meets four WCAG 2.2 success criteria:

2.1.1 Keyboard (A)
2.1.2 No Keyboard Trap (A)
2.5.2 Pointer Cancellation (A)
2.4.7 Focus Visible (AA)

Three more depend on how you use it:

4.1.2 Name, Role, Value (A): set aria-expanded on your anchor in step with open, and give the anchor an accessible name.
2.5.3 Label in Name (A): keep the visible label's words in any aria-label on the anchor.
2.4.6 Headings and Labels (AA): label the anchor with what the popover holds, never "Open Popover" or "More".

Reference docs⁠link

Choosing a pop-up surface⁠link

Choosing an open action⁠link

Built in⁠link

Hidden content renders when first shown⁠link

Using popovers well⁠link

Anchor⁠link

Animation⁠link

Open action⁠link

Staying open⁠link

Focus⁠link

In a dialog⁠link

Properties⁠link

Slots⁠link

Events⁠link

Methods⁠link

Props⁠link

Children⁠link

Events⁠link

Methods⁠link

Parameters⁠link

Render fragments⁠link

Event callbacks⁠link

Inputs⁠link

Content projection⁠link

Outputs⁠link

Methods⁠link

Props⁠link

Slots⁠link

Events⁠link

Methods⁠link

Props⁠link

Snippets⁠link

Events⁠link

Methods⁠link

Tokens⁠link

Names and states⁠link

Keyboard and focus⁠link

Pointer and touch⁠link

Display settings⁠link

Standards⁠link

Reference docs⁠

Choosing a pop-up surface⁠

Choosing an open action⁠

Built in⁠

Hidden content renders when first shown⁠

Using popovers well⁠

Anchor⁠

Animation⁠

Open action⁠

Staying open⁠

Focus⁠

In a dialog⁠

Properties⁠

Slots⁠

Events⁠

Methods⁠

Props⁠

Children⁠

Events⁠

Methods⁠

Parameters⁠

Render fragments⁠

Event callbacks⁠

Inputs⁠

Content projection⁠

Outputs⁠

Methods⁠

Props⁠

Slots⁠

Events⁠

Methods⁠

Props⁠

Snippets⁠

Events⁠

Methods⁠

Tokens⁠

Names and states⁠

Keyboard and focus⁠

Pointer and touch⁠

Display settings⁠

Standards⁠