-
Notifications
You must be signed in to change notification settings - Fork 22.5k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Add new and update existing popover api docs #26413
Changes from 5 commits
4d0a06e
ec71885
a0dcf4e
8129d92
4674aee
9b99ebc
6e74407
1e13228
ff61422
e554a00
8fd243e
53335c1
112dd50
4e63d38
4dd401b
4d9a331
40266d0
8fd2d15
c70e458
63dc0bb
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,25 @@ | ||
--- | ||
title: Top layer | ||
slug: Glossary/Top_layer | ||
page-type: glossary-definition | ||
--- | ||
|
||
The **top layer** is a specific layer in the [stacking context](/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context), which spans the entire width and height of the viewport and sits on top of all other layers displayed in a web document. It is created by the browser to contain elements that should appear on top of all other content on the page. | ||
|
||
Elements that will appear in the top layer include: | ||
|
||
- Fullscreen elements, i.e. elements that have been caused to display in fullscreen mode by a successful {{domxref("Element.requestFullscreen()")}} call. | ||
- {{htmlelement("dialog")}} elements displayed as a modal via a successful {{domxref("HTMLDialogElement.showModal()")}} call. | ||
- Popover elements shown via a successful {{domxref("HTMLElement.showPopover()")}} call. | ||
|
||
The following screenshot demonstrates how a shown popover element is placed in the top layer in Chrome: | ||
|
||
![An element in the top layer, as shown in the chrome devtools](top_layer_devtools.png) | ||
|
||
## See also | ||
|
||
- [The stacking context](/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context) | ||
- [The Fullscreen API](/en-US/docs/Web/API/Fullscreen_API) | ||
- [The Popover API](/en-US/docs/Web/API/Popover_API) | ||
- [Cascade layers](/en-US/docs/Learn/CSS/Building_blocks/Cascade_layers#creating_layers) | ||
- {{cssxref("@layer")}} | ||
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -19,6 +19,8 @@ it's now in full screen mode. If permission is denied, the promise is rejected a | |
element receives a {{domxref("Element/fullscreenerror_event", "fullscreenerror")}} event instead. If the element has been | ||
detached from the original document, then the document receives these events instead. | ||
|
||
> **Note:** It is possible to put a {{domxref("Popover_API", "popover", "", "nocode")}} element (for example `<div popover>...</div>`) into fullscreen mode. However, if you try to call `requestFullscreen()` on a popover that is already being shown in the top layer (via {{domxref("HTMLElement.showPopover()")}}), the promise will reject, because the behavior doesn't make sense in that context. | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. I don't think we should include this here: it's documented under Exceptions, which is the canonical place it should be documented. There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. OK; removed |
||
|
||
## Syntax | ||
|
||
```js-nolint | ||
|
@@ -66,6 +68,7 @@ returned. The rejection handler receives one of the following exception values:_ | |
- The element is not permitted to use the `fullscreen` feature, | ||
either because of [Permissions Policy](/en-US/docs/Web/HTTP/Permissions_Policy) configuration or other access control features. | ||
- The element and its document are the same node. | ||
- The element is a popover that is already being shown via {{domxref("HTMLElement.showPopover()")}}. | ||
|
||
## Security | ||
|
||
|
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,59 @@ | ||
--- | ||
title: "HTMLButtonElement: popoverTargetAction property" | ||
short-title: popoverTargetAction | ||
slug: Web/API/HTMLButtonElement/popoverTargetAction | ||
page-type: web-api-instance-property | ||
status: | ||
- experimental | ||
browser-compat: api.HTMLButtonElement.popoverTargetAction | ||
--- | ||
|
||
{{ APIRef("DOM") }}{{SeeCompatTable}} | ||
|
||
The **`popoverTargetAction`** property of the {{domxref("HTMLButtonElement")}} interface gets and sets the action to be performed (`"hide"`, `"show"`, or `"toggle"`) on a popover element being controlled by a control button. | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Should this section say, somewhere, that the default value is "toggle"? And maybe that you therefore don't need the attribute if you just want "toggle" behavior? There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. This is a really good point; I have made sure that the default action is made clear in the main landing page, property pages, and equivalent HTML attribute sections |
||
|
||
It reflects the value of the [`popovertargetaction`](/en-US/docs/Web/HTML/Element/button#popovertargetaction) HTML attribute. | ||
|
||
## Value | ||
|
||
An enumerated value. Possible values are: | ||
|
||
- `"hide"` | ||
- : The button will hide a shown popover. If you try to hide an already hidden popover, no action will be taken. | ||
- `"show"` | ||
- : The button will show a hidden popover. If you try to show an already showing popover, no action will be taken. | ||
- `"toggle"` | ||
- : The button will toggle a popover between showing and hidden. If the popover is hidden, it will be shown; If the popover is showing, it will be hidden. | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. nit: the last "If the popover" doesn't need "If" to be capitalized. There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Thanks; I've updated this on both the button and input DOM object pages. |
||
|
||
## Examples | ||
|
||
```js | ||
function supportsPopover() { | ||
return HTMLElement.prototype.hasOwnProperty("popover"); | ||
} | ||
|
||
const popover = document.getElementById("mypopover"); | ||
const toggleBtn = document.getElementById("toggleBtn"); | ||
|
||
const popoverSupported = supportsPopover(); | ||
|
||
if (popoverSupported) { | ||
popover.popover = "auto"; | ||
toggleBtn.popoverTargetElement = popover; | ||
toggleBtn.popoverTargetAction = "toggle"; | ||
} else { | ||
console.log("Popover API not supported."); | ||
} | ||
``` | ||
|
||
## Specifications | ||
|
||
{{Specifications}} | ||
|
||
## Browser compatibility | ||
|
||
{{Compat}} | ||
|
||
## See also | ||
|
||
- [Popover API](/en-US/docs/Web/API/Popover_API) |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,52 @@ | ||
--- | ||
title: "HTMLButtonElement: popoverTargetElement property" | ||
short-title: popoverTargetElement | ||
slug: Web/API/HTMLButtonElement/popoverTargetElement | ||
page-type: web-api-instance-property | ||
status: | ||
- experimental | ||
browser-compat: api.HTMLButtonElement.popoverTargetElement | ||
--- | ||
|
||
{{ APIRef("DOM") }}{{SeeCompatTable}} | ||
|
||
The **`popoverTargetElement`** property of the {{domxref("HTMLButtonElement")}} interface gets and sets the popover element to control via a control button. | ||
|
||
It is the JavaScript equivalent of the [`popovertarget`](/en-US/docs/Web/HTML/Element/button#popovertarget) HTML attribute. | ||
|
||
## Value | ||
|
||
A reference to a popover element in the DOM. | ||
|
||
## Examples | ||
|
||
```js | ||
function supportsPopover() { | ||
return HTMLElement.prototype.hasOwnProperty("popover"); | ||
} | ||
|
||
const popover = document.getElementById("mypopover"); | ||
const toggleBtn = document.getElementById("toggleBtn"); | ||
|
||
const popoverSupported = supportsPopover(); | ||
|
||
if (popoverSupported) { | ||
popover.popover = "auto"; | ||
toggleBtn.popoverTargetElement = popover; | ||
toggleBtn.popoverTargetAction = "toggle"; | ||
} else { | ||
console.log("Popover API not supported."); | ||
} | ||
``` | ||
|
||
## Specifications | ||
|
||
{{Specifications}} | ||
|
||
## Browser compatibility | ||
|
||
{{Compat}} | ||
|
||
## See also | ||
|
||
- [Popover API](/en-US/docs/Web/API/Popover_API) |
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -10,10 +10,12 @@ browser-compat: api.HTMLDialogElement.showModal | |
|
||
The **`showModal()`** method of the | ||
{{domxref("HTMLDialogElement")}} interface displays the dialog as a modal, over the top | ||
of any other dialogs that might be present. It displays into the top layer, along with a | ||
of any other dialogs that might be present. It displays in the {{glossary("top layer")}}, along with a | ||
{{cssxref('::backdrop')}} pseudo-element. Interaction outside the dialog is blocked and | ||
the content outside it is rendered inert. | ||
|
||
> **Note:** It is possible to create a {{htmlelement("dialog")}} element that is also a {{domxref("Popover_API", "popover", "", "nocode")}}, i.e. `<dialog popover>...</dialog>`. However, if you try to call `showModal()` on a popover that is already being shown in the top layer (via {{domxref("HTMLElement.showPopover()")}}), the call with fail, because the behavior doesn't make sense in that context. | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Again I think it is better just to document this once, in Exceptions. There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. OK, removed. In both this case and |
||
|
||
## Syntax | ||
|
||
```js-nolint | ||
|
@@ -31,7 +33,7 @@ None ({{jsxref("undefined")}}). | |
### Exceptions | ||
|
||
- `InvalidStateError` {{domxref("DOMException")}} | ||
- : Thrown if the dialog is already open (i.e. if the `open` attribute is already set on the {{htmlelement("dialog")}} element). | ||
- : Thrown if the dialog is already open (i.e. if the `open` attribute is already set on the {{htmlelement("dialog")}} element), or if the dialog is also a popover that is already being shown. | ||
|
||
## Examples | ||
|
||
|
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -10,9 +10,9 @@ browser-compat: api.HTMLElement.hidePopover | |
|
||
{{ APIRef("HTML DOM") }}{{SeeCompatTable}} | ||
|
||
The **`HTMLElement.hidePopover()`** method opens an element that has a valid [`popover`](/en-US/docs/Web/HTML/Global_attributes/popover) attribute. | ||
The **`hidePopover()`** method of the {{domxref("HTMLElement")}} interface hides a {{domxref("Popover_API", "popover", "", "nocode")}} element (i.e. one that has a valid [`popover`](/en-US/docs/Web/HTML/Global_attributes/popover) attribute) by removing it from the {{glossary("top layer")}} and styling it with `display: none`. | ||
|
||
When `hidePopover()` is called on an element with the [`popover`](/en-US/docs/Web/HTML/Global_attributes/popover) attribute that is currently open, then a {{domxref("HTMLElement/beforetoggle_event", "beforetoggle")}} non-cancelable event will be fired, followed by the popover closing, and a {{domxref("HTMLElement/toggle_event", "toggle")}} event will be fired. If the element is already closed, then nothing will happen. | ||
When `hidePopover()` is called on an showing element with the [`popover`](/en-US/docs/Web/HTML/Global_attributes/popover) attribute, a {{domxref("HTMLElement/beforetoggle_event", "beforetoggle")}} event will be fired, followed by the popover being hidden, and then the {{domxref("HTMLElement/toggle_event", "toggle")}} event firing. If the element is already hidden, an error is thrown. | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. nit: s/on an showing/on a showing There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Cool, fixed |
||
|
||
## Syntax | ||
|
||
|
@@ -28,24 +28,48 @@ None. | |
|
||
None ({{jsxref("undefined")}}). | ||
|
||
### Exceptions | ||
|
||
- `InvalidStateError` {{domxref("DOMException")}} | ||
- : Thrown if the popover is already hidden. | ||
|
||
## Examples | ||
|
||
Open a popover when moving the mouse pointer over a button: | ||
The following example provides functionality to toggle a popover on and off by pressing a particular key on the keyboard. | ||
|
||
### HTML | ||
First, some HTML: | ||
|
||
```html | ||
<button onmouseover="myFunction()">Hover Menu</button> | ||
<div id="myPopover">Popover</div> | ||
<div id="mypopover"> | ||
<h2>Help!</h2> | ||
|
||
<p>You can use the following commands to control the app</p> | ||
|
||
<ul> | ||
<li>Press <ins>C</ins> to order cheese</li> | ||
<li>Press <ins>T</ins> to order tofu</li> | ||
<li>Press <ins>B</ins> to order bacon</li> | ||
<hr /> | ||
<li>Say "Service" to summon the robot waiter to take your order</li> | ||
<li>Say "Escape" to engage the ejector seat</li> | ||
</ul> | ||
</div> | ||
``` | ||
|
||
### JavaScript | ||
And now the JavaScript to wire up the functionality: | ||
|
||
```js | ||
// On mouse-over, execute myFunction | ||
function myFunction() { | ||
document.getElementById("myPopover").hidePopover(); | ||
} | ||
const popover = document.getElementById("mypopover"); | ||
|
||
document.addEventListener("keydown", (event) => { | ||
if (event.key === "h") { | ||
if (popover.matches(":popover-open")) { | ||
popover.hidePopover(); | ||
} else { | ||
popover.showPopover(); | ||
} | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Maybe ok as-is, but this example feels like one where you'd rather use There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. OK, I've updated the examples on the |
||
} | ||
}); | ||
``` | ||
|
||
## Specifications | ||
|
@@ -58,12 +82,4 @@ function myFunction() { | |
|
||
## See also | ||
|
||
- Related event handlers | ||
|
||
- {{domxref("HTMLElement.beforetoggle_event", "HTMLElement.beforetoggle")}} | ||
- {{domxref("HTMLElement.toggle_event", "HTMLElement.toggle")}} | ||
|
||
- Related methods | ||
|
||
- {{domxref("HTMLElement.showPopover", "HTMLElement.showPopover")}} | ||
- {{domxref("HTMLElement.togglePopover", "HTMLElement.togglePopover")}} | ||
- [Popover API](/en-US/docs/Web/API/Popover_API) |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Aren't cascade layers a different thing?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Hrm, I thought from what I'd read that the top layer was effectively an auto-generated cascade layer, but I'm not so sure now. I've deleted the last two links to be on the safe side.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Just to confirm: top layer and cascade layers are definitely independent things.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
OK, thanks. I'll do some more reading in that area to make sure I don't get confused again.