Component

Popover

Published on

Description

The Popover component displays content in an overlay that appears on demand. It uses the native HTML popover attribute, which provides built-in light-dismiss behavior and top-layer rendering. A PopoverHint variant uses popover="hint" for tooltip-style overlays.

Use popovers for supplemental content such as tooltips, menus, or additional details. For content that requires user acknowledgment, use a Dialog instead.

Example

Open in new tab
View HTML markup 
<button type="button" popovertarget="popover-demo">Toggle popover</button>
<div id="popover-demo" popover="auto">
  <p>This is popover content that appears on demand.</p>
</div>

Accessibility

  • The trigger button should use the popovertarget attribute to associate it with the popover element.
  • Popovers are rendered in the top layer, ensuring they appear above all other content.
  • Light-dismiss allows closing by clicking outside or pressing Escape.
  • Focus management is handled natively by the browser.

References

  • Dialog — for modal content that blocks interaction with the page
  • Disclosure — for inline expandable content

Variables

None