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 `You can use the following commands to control the app
@@ -51,25 +72,49 @@ First, some HTML: