Using the Popover API

The Popover API provides developers with a standard, consistent, flexible mechanism for displaying popover content on top of other page content. Popover content can be controlled either declaratively using HTML attributes, or via JavaScript. This article provides a detailed guide to using all of its features.

Creating declarative popovers

In its simplest form, a popover is created by adding the popover attribute to the element that you want to contain your popover content. An id is also needed to associate the popover with its controls.

html
Popover content

Note: Setting the popover attribute with no value is equivalent to setting popover="auto".

Adding this attribute causes the element to be hidden on page load by having display: none set on it. To show/hide the popover, you need to add at least one control button (also know as the popover invoker). You can set a

Popover content

The default behavior is for the button to be a toggle button — pressing it repeatedly will toggle the popover between showing and hidden.

If you want to change that behavior, you can use the popovertargetaction attribute — this takes a value of "hide", "show", or "toggle". For example, to create separate show and hide buttons, you could do this:

html


Popover content

You can see how the previous code snippet renders in our Basic declarative popover example (source).

Note: If the popovertargetaction attribute is omitted, "toggle" is the default action that will be performed by a control button.

When a popover is shown, it has display: none removed from it and it is put into the top layer so it will sit on top of all other page content.