HTML popover Attribute
Definition and Usage
The popover attribute turns an element into
a popover element, meaning that when it is invoked, it will be placed on top of the content,
and 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.
A popover element automatically handles keyboard accessability (will close on
Esc) and light-dismiss functionality (clicking outside the popover will
close it).
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.
| Element | Attribute |
|---|---|
| All HTML elements | popover |
Examples
Example
Create a simple popover:
<button popovertarget="tip1">Show Tip</button>
<div id="tip1" popover>
Here we can show a helpful tip.
</div>
Try it Yourself »
Example
<button popovertarget="mydiv">Click me!</button>
<div id="mydiv" popover>
<h2>Popover</h2>
<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 |
