Vanilla JavaScript Projects

Project 14, Modern UI

Popovers Without Libraries

Tooltips, menus and toasts used to need a positioning library. Now the popover attribute handles showing and hiding, and CSS anchors place things next to their button.

Options ▾ Tooltip
Main API
Popover API
Placement
CSS Anchor Positioning
Dependencies
None
Your browser
Checking

Try each pattern

Dropdown menu

Nothing picked yet

Tooltips

Toast

Toasts stack and hide after 3 seconds.

Side sheet

Settings

Click outside or press Esc to close. The browser handles focus and dismissal.

How it works

  1. Mark it as a popoverAdd popover to any element. It starts hidden and appears in the top layer, above everything, when opened.
  2. Connect a buttonpopovertarget on a button opens and closes it, with Esc and outside clicks handled by the browser.
  3. Anchor itanchor-name on the button and position-anchor on the popover place it right next to the button, flipping if needed.
<!-- Opens and closes with no JavaScript -->
<button id="menuBtn" popovertarget="menu">Options</button>
<div id="menu" popover>…</div>

<style>
  #menuBtn { anchor-name: --menu; }
  #menu {
    position-anchor: --menu;
    position-area: bottom span-right;          /* below, aligned left */
    position-try-fallbacks: flip-block;        /* flip up near the bottom edge */
  }
</style>