popover-api/index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>Popover API examples</title>
  </head>
  <body>
    <h1>MDN Popover API examples</h1>

    <p>
      This set of examples demonstrates usage of the
      <a href="https://developer.mozilla.org/en-US/docs/Web/API/Popover_API"
        >Popover API</a
      >
      (also see the
      <a href="https://html.spec.whatwg.org/multipage/popover.html"
        >specification</a
      >).
    </p>

    <ul>
      <li>
        <a href="basic-declarative/">Basic declarative popover example</a>:
        Demonstrates a basic auto state popover.
      </li>
      <li>
        <a href="blur-background/">Blur background popover example</a>: Shows how
        you can add styling to the content behind the popover using the
        <code>::backdrop</code> pseudo-element.
      </li>
      <li>
        <a href="multiple-auto/">Multiple auto popovers example</a>: Demonstrates
        that, generally, only one auto popover can be displayed at once.
      </li>
      <li>
        <a href="multiple-manual/">Multiple manual popovers example</a>:
        Demonstrates that multiple manual popovers can be displayed at once, bt
        they can't be light-dismissed.
      </li>
      <li>
        <a href="nested-popovers/">Nested popover menu example</a>: Demonstrates
        the behavior of nested auto state popovers.
      </li>
      <li>
        <a href="popover-positioning/">Popover positioning example</a>: An
        isolated example showing CSS overriding of the default popover positioning
        specified by the UA sylesheet.
      </li>
      <li>
        <a href="toggle-help-ui/">Toggle help UI example</a>: Shows the basics of
        using JavaScript to control popover showing and hiding.
      </li>
      <li>
        <a href="toast-popovers/">Toast popovers example</a>: Illustrates how to
        make a simple system of "toast" notifications with popovers, which
        automatically hide again after a certain time.
      </li>
    </ul>
  </body>
</html>