HTML popover Attribute
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 »
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 can be a single element as in the example above, or an entire section of elements, like in the example below:
Example
<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 »
Syntax
<element popover="auto|manual|hint">
| Value | Description | |
|---|---|---|
| auto | Default value. Supports light-dismiss and closes other auto popovers when opened | Try it » |
| manual | Requires explicit closing via code or button (does not close when clicking outside) | Try it » |
| hint | Used for tooltips. Behaves like auto, but does not close sibling auto popovers | Try it » |
Browser Support
| Attribute | |||||
|---|---|---|---|---|---|
| popover | 114 | 114 | 125 | 17 | 100 |
Related Pages
HTML <button> attribute: popovertarget
HTML <button> attribute: popovertargetaction
HTML tutorial: Popover API
