diff --git a/files/en-us/web/api/htmlelement/togglepopover/index.md b/files/en-us/web/api/htmlelement/togglepopover/index.md index 58b36c60c990b95..e050a102c6f073a 100644 --- a/files/en-us/web/api/htmlelement/togglepopover/index.md +++ b/files/en-us/web/api/htmlelement/togglepopover/index.md @@ -35,14 +35,35 @@ togglePopover(force) None ({{jsxref("undefined")}}). + + ## Examples -The following example provides functionality to toggle a popover on and off by pressing a particular key on the keyboard. +See the [Popover API examples landing page](https://mdn.github.io/dom-examples/popover-api/) to access the full collection of MDN popover examples. + +### Simple auto-popup + +This is a slightly modified version of the [Toggle Help UI Popover Example](https://mdn.github.io/dom-examples/popover-api/toggle-help-ui/). +The example toggles a popover on and off by pressing a particular key on the keyboard (when the example window has focus). + +The HTML for the example is shown below. +This first element defines instructions on how to invoke the popup, which we need because popups are hidden by default. + +```html +

+ Press "h" to toggle a help screen (select example window first). +

+``` -First, some HTML: +We then define a `
` element which is the popup. +The actual content doesn't matter, but note that we need the [`popover`](/en-US/docs/Web/HTML/Global_attributes/popover) attribute to make the `
` into a popover so that it is hidden by default (or we could set this element in the JavaScript). ```html -
+

Help!

You can use the following commands to control the app

@@ -51,25 +72,49 @@ First, some HTML:
  • Press C to order cheese
  • Press T to order tofu
  • Press B to order bacon
  • -
    -
  • Say "Service" to summon the robot waiter to take your order
  • -
  • Say "Escape" to engage the ejector seat
  • ``` -And now the JavaScript to wire up the functionality: +The JavaScript for the example is shown below. +First we check whether popovers are supported, and if they aren't we hide the popover `div` so that it isn't displayed inline. ```js +const instructions = document.getElementById("instructions"); const popover = document.getElementById("mypopover"); -document.addEventListener("keydown", (event) => { - if (event.key === "h") { - popover.togglePopover(); - } -}); +if (!HTMLElement.prototype.hasOwnProperty("popover")) { + popover.innerText = ""; + instructions.innerText = "Popovers not supported"; +} ``` +If popovers are supported we add a listener for the `h` key to be pressed, and use that to trigger opening the popup. +We also log whether the popup was open or closed after the call, but only if a `true` or `false` was returned. + +```js +if (HTMLElement.prototype.hasOwnProperty("popover")) { + document.addEventListener("keydown", (event) => { + if (event.key === "h") { + popover.togglePopover(); + } + }); +} +``` + + + +You can test this out using the live example below. + +{{EmbedLiveSample('Examples', 700, 290)}} + ## Specifications {{Specifications}}