-
Notifications
You must be signed in to change notification settings - Fork 22.4k
/
index.md
50 lines (32 loc) · 2.26 KB
/
index.md
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
---
title: popover
slug: Web/HTML/Global_attributes/popover
page-type: html-attribute
browser-compat: html.global_attributes.popover
---
{{HTMLSidebar("Global_attributes")}}
The **`popover`** [global attribute](/en-US/docs/Web/HTML/Global_attributes) 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`](/en-US/docs/Web/HTML/Element/button#popovertarget) attribute) or a {{domxref("HTMLElement.showPopover()")}} call.
When open, popover elements will appear above all other elements in the {{glossary("top layer")}}, and won't be influenced by parent elements' {{cssxref('position')}} or {{cssxref('overflow')}} styling.
A popover attribute can have values [`"auto"`](/en-US/docs/Web/API/Popover_API/Using#auto_state_and_light_dismiss) (default) or [`"manual"`](/en-US/docs/Web/API/Popover_API/Using#using_manual_popover_state).
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 {{domxref("Popover API", "Popover API", "", "nocode")}} landing page.
## Examples
The following renders a button that will open a popover element when activated.
```html
<button popovertarget="my-popover">Open Popover</button>
<div popover id="my-popover">Greetings, one and all!</div>
```
{{EmbedLiveSample('Examples', 600, 200)}}
> **Note:** See our [Popover API examples landing page](https://mdn.github.io/dom-examples/popover-api/) to access the full collection of MDN popover examples.
## Specifications
{{Specifications}}
## Browser compatibility
{{Compat}}
## See also
- {{domxref("Popover API", "Popover API", "", "nocode")}}
- [`popovertarget`](/en-US/docs/Web/HTML/Element/button#popovertarget) HTML attribute
- [`popovertargetaction`](/en-US/docs/Web/HTML/Element/button#popovertargetaction) HTML attribute
- [`::backdrop`](/en-US/docs/Web/CSS/::backdrop) CSS pseudo-element
- [`:popover-open`](/en-US/docs/Web/CSS/:popover-open) CSS pseudo-class