Popovers

A popover is a panel that opens above the page, such as a menu, a list of choices or a drawer. The browser opens and closes it: Escape and a click outside close it, and it moves the focus for keyboard and screen reader users. Every panel Smootify opens or closes can be a popover, from the mini cart to the option pickers, the filters and the cookie banner.

Build a popover

A popover is two attributes, and Smootify works the same with every popover you write:

1. The panel is an element with the attribute popover="auto" and an id, such as size-list.
2. The trigger is a <button popovertarget="size-list">, with the id of the panel.
3. Inside a form, such as the add-to-cart form, also give the trigger type="button". Without it, the trigger submits the form.
4. To close the panel from inside, add a button with the same popovertarget and popovertargetaction="hide". Escape and a click outside also close it.

How it looks.

• The browser shows the panel above everything, in the middle of the window. Place it with your own styles, such as a fixed position on the right for a drawer.
• Smootify takes the browser’s padding and border off every popover, and the class of your panel sets its own. There is no backdrop: the page behind stays as it is. For a backdrop, such as behind a drawer, set the CSS variable --smootify-backdrop-color on the panel’s class, for example rgba(0, 0, 0, 0.5). See CSS.
• A panel that is a popover only on small screens, such as filters in a column on desktop and in a drawer on mobile: on the panel’s class, set --smootify-closed-display: flex at the desktop breakpoint, with position: static, inset: auto, margin: 0 and the column’s width, since the browser places every popover fixed in the middle. Set --smootify-closed-display: none at tablet, so it is a drawer again.
• The page under a drawer. A popover that covers the page, such as a cart drawer or a full-screen menu, takes the attribute data-overflow-body: the page stops scrolling while it is open, and its scrollbar keeps its space so nothing jumps. A popover anchored to its trigger, such as a small menu under a button, leaves it out. It works on a <dialog> too.
• To animate a popover, use CSS: @starting-style and transition-behavior: allow-discrete on the panel, as in Write components. The transition plays whoever opens or closes the popover: your trigger, Smootify (the cart after an add to cart, the market suggestion), Escape or a click outside. Smootify adds no animation of its own.

Which parts can use a popover

Each of these parts can open in a popover:

On a collection page, auto-close-details="true" on smootify-search-discovery closes every popover inside it each time the results change, such as a filters panel. That includes a popover inside a product card.

Pickers in a popover

These rules apply to variant-popover, addon-popover, filter-popover, sort-popover, configurator-popover, country-switcher, location-switcher and the Dropdown type of dynamic-property:

The attributes are the ones of the *-dropdown version of each picker, such as data-option on variant-popover.

<div>Size</div>
<variant-popover data-option="1">
  <button type="button" popovertarget="size-list"><span>M</span></button>
  <div id="size-list" popover="auto">
    <a href="#"><span option="title">Value</span></a>
  </div>
</variant-popover>

Here the panel has the id size-list. The label “Size” sits outside the trigger, because the trigger’s text becomes the chosen value.

Popovers in repeated blocks

A popover can sit inside a block Smootify repeats, such as an address, an order or a product card. Each copy gets its own id, and its trigger follows, so each trigger opens its own panel. Design the popover once. On product cards that Astro renders on the server, give each card’s popover its own id and point the trigger’s popovertarget at it: Smootify never reuses an id the page already has.

In a mini cart, a popover anywhere inside smootify-cart makes Smootify open the whole cart as a popover, so keep popovers out of the lines.

Before you publish