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

There are two ways, and Smootify works the same with both:

Webflow’s Popover element, step by step:

1. Add the Popover element where the guide of the part says, such as inside smootify-cart, and put the panel’s content inside it. Place it with its position settings.
2. The trigger is any Webflow Button or Link Block. In its link settings, set Type to Popover, choose the Popover as Target, and the Action: Toggle, Show or Hide. Webflow publishes it as a button that opens the Popover.
3. A close button inside the panel is a Button or Link Block with the same settings and the Action Hide.

Two custom attributes, step by step:

1. The panel is a Div block with the custom attribute popover set to auto. Give it an ID in its element settings, such as size-list.
2. The trigger is a Custom element with the tag button and the custom attribute popovertarget set to the panel’s ID, size-list.
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 custom 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 cart dropdown, leaves it out. It works on a dialog too.
• Smootify does not animate a popover. It keeps the transitions you design.

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, such as data-option on variant-popover.

Here the popover has the ID size-list in its element settings. The label “Size” sits outside the trigger, because the trigger’s text becomes the chosen value.

In country-switcher and location-switcher, a Webflow Dropdown wins over a popover: with both inside, Smootify uses the Dropdown.

Popovers in repeated blocks

A popover can sit inside a block Smootify repeats, such as a cart line, 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.

In a mini cart, keep popovers out of the lines unless the cart is in a dialog or a details element: a popover anywhere else inside smootify-cart makes Smootify open the whole cart as a popover.

Before you publish