The Popover API

As you might guess, the Popover API allows you to declaratively “pop” a piece of content “over” another.

This is incredibly useful because, with few exceptions, ordinarily, if you want some UI to do something when clicked, you would need JavaScript. You can still use JavaScript with the Popover API, but you can also just use HTML. Consider this code:

<p>
    Is 'Killers of the Flower Moon' one of the most boring and
        overrated films ever made?
    <button popovertarget="answer">Yes/No</button>
    <span id="answer" popover>
        Yes! It was 206 minutes of my life I'll never get back
    </span>
</p>

That’s example_15-01, and if you open it in a browser and click the Yes/No button, you will get something that looks like this.

Figure 15.1: By default, the popover toggles and sits in the center of the viewport

Let’s examine...