HTML popover Attribute

The HTML popover global attribute turns an HTML element into a popover that can be displayed above other page content. Popovers are hidden until opened and can be controlled using HTML buttons or JavaScript.

Elements That Use the popover Attribute

The popover attribute is a global attribute and can be specified on HTML elements. It turns the element into a popover element that remains hidden until it is shown.

Element	Description
All HTML elements	Turns the element into a popover element that can be shown above other page content.

popover Values

The popover attribute is an enumerated attribute. It supports the values auto, manual, and hint.

Value	Description
`auto`	Creates a popover that supports light dismiss and normally closes other open auto popovers.
`manual`	Creates a popover that remains open until it is explicitly hidden and does not support light dismiss.
`hint`	Creates a light-dismissible popover intended for temporary hint-like content without closing an open auto popover.

An empty popover attribute is equivalent to popover="auto".

<div popover>
  Popover content
</div>

How popover Works

An element with the popover attribute is initially hidden. When the popover is shown, the browser places it in the top layer so it appears above other page content.

A popover can be controlled declaratively with a button using the popovertarget attribute. The value of popovertarget identifies the id of the popover element.

<button type="button" popovertarget="information">Show Information</button>

<div id="information" popover>
  <p>This content is displayed in a popover.</p>
</div>

By default, the button toggles the targeted popover between its hidden and shown states.

auto Popovers

The auto value is useful for popovers such as menus and other temporary content. Auto popovers support light dismiss, allowing the user to close them by interacting outside the popover or using a browser-supported close action such as the Esc key.

<button type="button" popovertarget="menu">Open Menu</button>

<div id="menu" popover="auto">
  <p>Menu content</p>
</div>

Showing an auto popover generally closes another open auto popover unless the popovers are nested.

manual Popovers

A manual popover does not close automatically when the user interacts outside it and does not respond to light dismiss. It remains open until it is explicitly hidden.

<button type="button" popovertarget="notice">Toggle Notice</button>

<div id="notice" popover="manual">
  <p>This popover remains open until it is explicitly closed.</p>
</div>

Multiple independent manual popovers can be displayed at the same time.

hint Popovers

The hint value is designed for temporary hint-like content. Hint popovers support light dismiss but do not close an open auto popover when they are displayed.

<button type="button" popovertarget="help">Show Help</button>

<div id="help" popover="hint">
  <p>Helpful information appears here.</p>
</div>

Opening a hint popover generally closes another unrelated hint popover that is already open.

Common Mistakes

Do not treat popover as a Boolean attribute. Although writing popover without a value creates an auto popover, the attribute also accepts the specific values auto, manual, and hint.

Do not confuse popover with popovertarget. The popover attribute identifies the content as a popover, while popovertarget associates a button with the popover it controls.

Do not expect a manual popover to close when the user clicks outside it. Manual popovers must be explicitly hidden.

Do not use popovers when a modal interaction is required. Popovers are generally non-modal and do not make the rest of the page inactive.

Browser Support

Baseline: Newly available indicates that a feature is supported in the latest stable version of each of the core browsers. Most users can use these features reliably, but they may not work in older browser versions.

The popover global attribute is supported in the latest core browser versions, but older browser versions may not support the Popover API or all of its features.

Checking Browser Support

For current browser compatibility information, visit Can I Use? . Search for the HTML element or attribute you want to check. You can also narrow your search by entering an element name and attribute name separated by a colon. Search results can include related HTML features, element attributes, input types, APIs, and other technologies, so select the result that most closely matches the feature you are checking.

Click the button to open the popover. Because the example uses the default auto state, you can also close the popover by clicking outside it or pressing the Esc key.

Play in Editor

Summary

The HTML popover global attribute turns an element into popover content that can be displayed in the browser's top layer. The auto, manual, and hint values provide different opening and dismissal behaviors, and popovers can be controlled declaratively with attributes such as popovertarget.