# Popovers

> Which Smootify parts can open in a popover, how to build one with Webflow's Popover element or two custom attributes, and the rules for option pickers in a popover.

Status: Ready (Smootify 2.0)  
URL: https://www.smootify.io/docs/build/popovers  
Updated: 2026-10-08

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.

> [!NOTE]
> Popovers work in Safari 17, Chrome 114, Firefox 125 and later. The Webflow Dropdowns, dialogs and details elements you may already use keep working.

## Build a popover

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

- **Webflow's Popover element**, on sites that have it: the panel is the Popover, placed with its position settings; the trigger is any Webflow Button or Link Block whose link settings have Type **Popover**, the Popover as Target and an Action (Toggle, Show or Hide). A close button is the same with Hide. Put the Popover where the guide of each part says.
- **Two custom attributes**, on any site: the panel is a Div block with `popover="auto"` and an ID, such as `size-list`; the trigger is a Custom element with the tag `button` and `popovertarget="size-list"`.

**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](https://www.smootify.io/docs/developers/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:

| Element | What the popover holds | Guide |
|---|---|---|
| `smootify-cart` | the mini cart | [Build the cart](https://www.smootify.io/docs/build/cart) |
| `variant-swatches` | the value buttons; closes after a pick | [Product page](https://www.smootify.io/docs/build/product-page) |
| `variant-popover` | the values of an option | [Product page](https://www.smootify.io/docs/build/product-page) |
| `addon-popover` | the variants of an add-on | [Product add-ons](https://www.smootify.io/docs/features/add-ons) |
| `configurator-popover` | a configurator option | [Product configurator](https://www.smootify.io/docs/features/product-configurator) |
| `dynamic-property` (Dropdown type) | the choices | [Dynamic properties](https://www.smootify.io/docs/features/dynamic-properties) |
| `filter-popover`, `sort-popover` | a filter's values, the sort choices | [Filters](https://www.smootify.io/docs/build/filters) |
| `country-switcher`, `location-switcher` | the countries, the locations | [Markets](https://www.smootify.io/docs/features/markets) |
| `smootify-search` | the results; opens as the visitor types | [Predictive search](https://www.smootify.io/docs/build/predictive-search) |
| `store-availability` | the other locations, loaded when it opens | [Pickup](https://www.smootify.io/docs/features/store-availability) |
| `klaviyo-back-in-stock` | the alert form | [Back in stock](https://www.smootify.io/docs/features/back-in-stock) |
| `smootify-consent` | the cookie banner | [Cookie consent](https://www.smootify.io/docs/features/cookie-consent) |
| the market suggestion | is the popover itself; Smootify opens it a few seconds after the page loads | [Market suggestion](https://www.smootify.io/docs/features/market-suggestion) |

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 trigger goes inside the element.** Its text shows the current choice, so it changes when the visitor picks. A fixed label, such as Size, goes outside it.
- **The first link or button inside the popover is the template** of every value. Smootify copies it and removes the links or buttons next to it. A button with `popovertarget` does not count.
- **A pick closes the popover**, as do Escape and a click outside. A close button inside needs `popovertarget` and `popovertargetaction="hide"`, or it becomes the template.

The attributes are the ones of the Dropdown version, such as `data-option` on `variant-popover`.

```html
<div>Size</div>
<variant-popover data-option="1">
  <button type="button" popovertarget="size-list"><div>M</div></button>
  <div popover="auto">
    <a href="#"><span option="title">Value</span></a>
  </div>
</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

> [!STUCK]
> - **The trigger adds to cart or submits the form.** It is inside a form without `type="button"`.
> - **A close button became a value, or disappeared.** It is the first button in the popover, so it became the template. Close with a button that has `popovertarget` and `popovertargetaction="hide"`, or leave it to Escape and the click outside.
> - **The label on the trigger is replaced.** The trigger's first text shows the choice. Put a fixed label outside the trigger, or after the text of the choice.
> - **The choice never shows on the trigger.** The trigger is outside the picker element.
> - **The picker disappears.** It has no popover, or the popover has no link or button inside.
> - **The trigger does nothing.** Its `popovertarget` is not the exact ID of the panel.
> - **The panel opens in the middle of the window.** It has no position of its own: place it with your styles, or with the position settings of Webflow's Popover element.
> - **The panel never shows on desktop.** A closed popover is hidden: set `--smootify-closed-display` on its class at that breakpoint.