HTML popover Attribute
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, or an entire section of HTML elements. See examples below.
Applies to
The
popover attribute is a Global Attribute, and can be used on any HTML element, but the element must be editable.
| Element | Attribute |
|---|---|
| All HTML elements | popover |
Examples
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 »
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 | 125 | 17 | 100 |
