Popover

The Popover element shows content on top of your page without blocking it. It’s built for content the visitor can use or ignore — a dropdown-style menu, a small panel of options, a tooltip-like hint, a cart preview, or a short notice in the corner of the screen.

While a Popover is open, the rest of the page keeps working: visitors can still scroll, click, and type everywhere else. You add a Popover from the Add panel like any other element, and you open and close it with interactions.

Popover or Modal?

Popovers and Modals open, close, and animate the same way. The difference is how they treat the rest of the page:

• Popover — floats above the page and leaves it usable. It can sit next to the button that opened it, or in a fixed spot on the screen. It never dims the page or traps keyboard focus.
• Modal — takes over the page. It appears in the center, dims everything behind it, and the page can’t be used until it’s closed. Use it when you need a decision or full attention.

Structure

A Popover is a single container: the Popover itself is the card. There’s no separate window or overlay like a Modal has, so you add your content straight into it, the same way you’d fill a Div.

A brand-new Popover already comes with everything it needs to work:

• A heading, a short line of text, and a close button that closes the Popover.
• A gentle fade animation for opening and closing.
• An Open on setting of Page load, so the Popover is visible the moment you add it.
• A Position in the bottom right corner of the screen.

Everything inside is yours to edit or remove — the heading, the text, and the button are just a starting point.

Opening and closing the Popover

There are two ways to control a Popover: the quick Open on setting for opening it automatically, and interactions on your own buttons for opening, closing, or toggling it.

Open on

The Open on setting at the top of the Popover’s settings makes it appear on its own. Pick when it should open:

• Page load — open as the page loads. You can add a Delay so it appears a few seconds in.
• Exit intent — open when the visitor looks like they’re about to leave.
• Scroll depth — open once the visitor has scrolled a set distance down the page. Scrolling back up doesn’t close it; if it should close above that point, add a Scroll depth interaction with a Close action on Returned.
• Manually — the Popover doesn’t open on its own. Choose this for menus and panels that should only open from a button.

You can also add a run rule to an Open on trigger — for example, open only once per visitor — so a notice doesn’t reappear on every visit. The rule counts per Popover, so a duplicated Popover is tracked on its own.

Open, Close, and Toggle from any element

To control a Popover from a Button (or any other element), add a Click interaction (or other interaction) to that element, and add a Popover action to it. You’ll find it in the Element actions section of the action list.

• Open — opens the Popover you set as the target.
• Close — closes the Popover. Placed on an element inside a Popover, it closes that Popover automatically — which is how the built-in close button works, with nothing to configure.
• Toggle — opens the Popover if it’s closed and closes it if it’s open. This is the one to use for a menu button that opens and closes the same Popover.

The Popover actions only show up when the element you’re on can actually reach a Popover, so you won’t see them where they wouldn’t do anything.

Settings

Position

The Position setting decides where the Popover appears. It has two modes:

To the screen

The Popover sits in a fixed spot of the browser window. Pick one of nine spots in Screen position, from the top left corner through the center to the bottom right corner. This is the default, with Bottom right selected, which works well for notices and small panels that should stay clear of your content.

To an element

The Popover appears next to an element on the page, like a dropdown appears under its button.

• Anchor — the element the Popover is placed against. Left empty, it shows Trigger element: the Popover appears next to whichever button opened it. This means several buttons can open the same Popover, and it shows up next to each one. You can also pick a specific element, and refine it with target modifiers, the same way you pick an interaction’s target.
• Side — which side of the anchor the Popover opens on: Above, Below (default), Start, or End. Start and End follow the reading direction, so they flip automatically on right-to-left sites.
• Alignment — how the Popover lines up with the anchor along that side: Start, Center (default), or End.
• Snap — when it’s on, the Popover moves to the opposite side if it wouldn’t fit on screen where you placed it. It’s off by default, so the Popover always stays where you put it.

Older browsers that don’t support element positioning also show the Popover in the center of the screen, so it never breaks your layout.

Close on

The Close on setting decides how a visitor can dismiss the Popover without using a button:

• Everything — the visitor can close it by clicking anywhere outside it or by pressing Esc.
• Click outside — only clicking outside the Popover closes it.
• Esc — only the Esc key closes it.
• Nothing (default) — the Popover stays open until a Close or Toggle action closes it.

Clicks on the button that opened the Popover, and inside any Popover opened from it, don’t count as clicking outside. So a Toggle button keeps working as expected.

Animation

How a Popover opens and closes is animated with its own interaction, listed as Popover visibility change. It has three moments you can animate:

• Show — plays as the Popover opens.
• Before close — plays as the Popover closes. Mosaic waits for it to finish before the Popover actually goes away, so your exit animation is never cut off.
• After close — runs after the Popover has closed, for anything you want to happen once it’s gone.

Every new Popover comes with a soft fade. You’re free to change it to any animation you like, or remove it entirely, in which case the Popover opens and closes instantly. Because the animation is a normal interaction, you build it the same way you would any other, using the timeline and animation options.

Accessibility settings

The Popover has its own Accessibility settings group with three fields:

• Accessible label — the name screen readers announce for the Popover. It supports dynamic values.
• Role — what kind of popup this is. It suggests dialog, menu, listbox, and tooltip, but you can type any value. Left blank, the Popover has no role.
• Live region — set it to polite or assertive if screen readers should read the Popover’s content out as soon as it appears, for example for a short message. It’s off by default.

You don’t have to manage keyboard focus yourself. When the Popover opens, focus moves to its first field, if it has one. Tab moves through the Popover and then continues with the rest of the page, so a Popover never traps the keyboard. See Accessibility support for the full details.

Styling the Popover

The Popover itself carries the card look: by default it’s a white, rounded card with a soft shadow and comfortable padding, and its content is stacked in a column. Mosaic’s built-in styling is intentionally light, so your own styles always win without a fight. The Popover sizes itself to its content.

When Snap moves the Popover to the opposite side, the Popover and everything inside it get the Flipped style state. Use it to adjust anything drawn for the original side — for example, to point a small arrow in the other direction.

In the editor, the Popover appears on the canvas while you work inside it, so you can style and edit it in place.

Popovers inside Popovers and Modals

Popovers and Modals can be placed inside each other, or opened from a button inside each other, in any combination. For example, a Modal can contain a button that opens a Popover, or a menu Popover can open a submenu Popover.

• When the outer one closes, everything opened from it closes too, so nothing is left hanging on the page.
• Opening a Popover that sits inside another closed Popover or Modal opens the outer one first, so the inner one is always visible.