HTML popover Attribute
Example
Add a <h1> element with a popover attribute, and a button to show/hide it:
<h1 popover id="myheader">Hello</h1>
<button popovertarget="myheader">Click
me!</button>
Try it Yourself »
Definition and Usage
The popover attribute defines an element as
a popover element, meaning that when it is invoked, it will be placed on top of the content, not
interfere with the position of other HTML elements.
A popover element will be invisible until it is invoked by another element.
The other element must have a popovertarget
attribute where the value refers to the popover element's id.
The popover element will be placed on top of all other content, and by clicking the popovertarget element, the popover element will toggle between showing and hiding:
Hello
The popover element can be a single HTML element as in the example above, or an entire section of HTML elements like in the example below.
Example
Use a DIV element as a popover element:
<div popover id="mydiv">
<h2>Popover</h2>
<hr>
<p>A popover is an element that is placed on top of everything else.</p>
<p>It can be used when you want to tell something important.</p>
</div>
Try it Yourself »
Browser Support
| Attribute | |||||
|---|---|---|---|---|---|
| popover | 114 | 114 | Not supported | 17 | 100 |
Syntax
<element popover>
Attribute Values
The popover attribute is a boolean attribute.
If it is present, it specifies that this element is a popover element.
Related Pages
HTML Input popovertarget Attribute
HTML Input popovertargetaction Attribute