Popovers in HTML

Two attributes and the browser handles the light dismiss, the top layer and the focus.

<button type="button" popovertarget="account-menu">
  Account
</button>

<div id="account-menu" popover>
  <ul>
    <li><a href="/profile">Profile</a></li>
    <li><a href="/settings">Settings</a></li>
  </ul>
  <button type="button" popovertarget="account-menu"
          popovertargetaction="hide">Close</button>
</div>

<div id="tips" popover="manual">
  <p>Press tab to move between fields.</p>
</div>

How it works

1. popover on the panel; popovertarget on the button that opens it.
2. Clicking outside or pressing Escape closes an auto popover.
3. popovertargetaction can force it to only show or only hide.

The run, in numbers

Lines

16

Characters to type

377

Tokens

106

Three-star pace

75 tpm

At the three-star pace of 75 tokens a minute, this run takes about 85 seconds.

Type this snippet

Step 4 of 4 in Disclosure & dialogs, step 4 of 13 in Interactive HTML.

← Previous Next →