HTML popover Global Attribute

If this site has been useful, we’d love your support! Consider buying us a coffee to keep things going strong!

Description

The popover attribute is a global attribute that can be added to any HTML element. It is primarily used to associate an element with a popover widget - a type of interactive floating UI element that can display additional content or information in a small overlay. Unlike tooltips, popovers can contain richer content, such as images, links, or interactive forms.

Purpose

The popover attribute indicates that the element can trigger or is related to a popover, and it helps browsers and scripts understand the connection between the element and the popover content. It can enhance user experience by providing contextual information without navigating away from the current page.

Behavior

When an element with the popover attribute is interacted with (typically via focus, hover, or click), the associated popover content is displayed near the element.
Popovers can be dismissed automatically when the user clicks outside the popover or moves focus away.
Popovers are often interactive, meaning users can click links, buttons, or fill forms inside them.
The positioning of the popover relative to the target element can usually be controlled via CSS or JavaScript APIs.

Example

<!-- Target element with popover -->
<button popover="info-popover">More Info</button>

<!-- Popover content -->
<div id="info-popover" role="dialog" hidden>
  <h3>Product Details</h3>
  <p>This product is made from eco-friendly materials.</p>
  <a href="/learn-more">Learn More</a>
</div>

In this example:

The button element is linked to the popover content via popover="info-popover".
The popover itself is a <div> with the corresponding id.
Initially, the popover is hidden using the hidden attribute.
When triggered, the popover becomes visible, providing additional context without leaving the page.

Key Notes

popover is a global attribute, so it can theoretically be added to any HTML element.
It does not provide popover functionality by itself; a supporting script or browser implementation is needed to manage the display, positioning, and accessibility.
Popovers linked via this attribute should use proper ARIA roles like role="dialog" or role="tooltip" to ensure accessibility.
Developers can enhance popovers with CSS transitions, animations, and JavaScript for interactivity.

Syntax

<div id="my-popover" popover></div>

Values

popover

The popover attribute accepts two specific values that determine its interaction behavior. If you use the attribute without a value (e.g., <div popover>), it defaults to auto.

Value	Behavior
`auto`	"Light dismiss" is active. Clicking outside the popover or pressing `Esc` will close it. Opening a second `auto` popover will usually close the first one.
`manual`	No light dismiss. It must be explicitly closed via a button or JavaScript. It does not close other popovers when opened.

Example

HTML

<button popovertarget="confirm-popup">Delete Account</button>



<div id="confirm-popup" popover="manual">

  <p>Are you absolutely sure?</p>

  <button popovertarget="confirm-popup" popovertargetaction="hide">Cancel</button>

</div>

Result

Editor

Browser Support

The following information will show you the current browser support for the HTML popover global attribute. Hover over a browser icon to see the version that first introduced support for this HTML global attribute.