HTML Popover Attribute
- Previous Page lang
- Next Page spellcheck
- Go to the Previous Level HTML Global Attributes
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>
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>
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 |
- Previous Page lang
- Next Page spellcheck
- Go to the Previous Level HTML Global Attributes