Usage

  • This is not a tooltip.
  • Popovers allow a small piece of content to pop over existing content.
  • They are a lightweight component, and shouldn’t contain heavy content or important alerts like modal dialogs do.
Current support:
Not baseline. This simple example uses the popover API with anchor positioning which has the most support in Chrome (Safari, Firefox etc. may not yet support this and will require a polyfill).

Code examples

Content popover

<button class="popover-toggle menu"  popovertarget="account-popover">
  More
</button>
<div id="account-popover" class="popover-surface" popover>
  <p>
    Popovers are not <a href="/accessible-web/tooltip/">tooltips</a>. 
    They are used to display additional content or simple actions related to a specific element.
  </p>
</div>

Popovers are not tooltips. They are used to display additional content or simple actions related to a specific element. 

<nav class="popover">
  <ul>
    <li>
      <button class="popover-toggle menu"  popovertarget="nav-popover">
        Menu
      </button>
      <ul id="nav-popover" class="popover-surface" popover>
        <li>
          <a href="/accessible-design/">Design</a>
        </li>
        <li>
          <a href="/accessible-web/">Web</a>
        </li>
        <li>
          <a href="/accessible-ios/">iOS</a>
        </li>
        <li>
          <a href="/accessible-android/">Android</a>
        </li>
      </ul>
    </li>
  </ul>
</nav>

Further reading

Related popover entries