HTML Popover Attribute

Definition and Usage

popover The attribute defines the element as a pop-up element, which means that when the element is called, it will be placed on top of the content without interfering with the position of other HTML elements.

The pop-up element will be invisible until it is called by another element. The other element must have a popovertarget attribute with a value that references the id of the pop-up element.

The pop-up element will be placed on top of all other content. By clicking the popovertarget element, the pop-up element can be toggled between showing and hiding:

Hello

The pop-up element can be a single HTML element like the one in the above example, or a whole set of HTML elements like the one below.

See Also:

HTML Reference Manual:HTML Input popovertarget Attribute

HTML Reference Manual:HTML Input popovertargetaction Attribute

Instance

Example 1

Add an <h1> element with the popover attribute, and a button to show/hide it:

<h1 popover id="myheader">Hello</h1>
<button popovertarget="myheader">Click Me!</button>

Try It Yourself

Example 2

Use a div element as a popover element:

<div popover id="mydiv">
  <h2>Popover</h2>
  <hr>
  <p>A popover is an element placed above all other elements.</p>
  <p>Use it when you want to inform about something important.</p>
</div>

Try It Yourself

Syntax

<element popover>

Attribute Value

popover The attribute is a boolean attribute. If it is set, it specifies that the element is a popover element.

Browser Support

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
114 114 Not Supported 17 100