popover #
::: section-content
The popover
global attribute is used to
designate an element as a popover element.
Popover elements are hidden via display: none until opened via an
invoking/control element (i.e. a <button> or <input type="button">
with a
popovertarget attribute) or
a
HTMLElement.showPopover()
call.
When open, popover elements will appear above all other elements in the
top
layer, and
won't be influenced by parent elements'
position
or
overflow
styling.
A popover attribute can have values
"auto"
(default) or
"manual".
Popovers that have the auto state can be "light dismissed" by
selecting outside the popover area, and generally only allow one popover
to be displayed on-screen at a time. By contrast, manual popovers must
always be explicitly hidden, but allow for use cases such as nested
popovers in menus.
For detailed information on usage, see the Popover API landing page. :::
Examples #
::: section-content The following will render a button which will open a popover element.
::: code-example [html]{.language-name}
<button popovertarget="my-popover">Open Popover</button>
<div popover id="my-popover">Greetings, one and all!
:::
::: {#sect1 .notecard .note} Note: See our Popover API examples landing page{target="_blank"} to access the full collection of MDN popover examples. ::: :::
Specifications #
::: _table #
Specification #
HTML Standard
[#
the-popover-attribute]{.small}
:::
Browser compatibility #
::: _table Desktop Mobile
Chrome Edge Firefox Internet Explorer Opera Safari WebView Android Chrome Android Firefox for Android Opera Android Safari on IOS Samsung Internet
popover 114 114 114 No 100 17 114 114 No No 17 No
:::
See also #
::: section-content
- Popover API :::
::: _attribution
© 2005–2023 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5
or later.
https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/popover{._attribution-link}
:::