Popover element

Tooltips, menus and notices that float above your WordPress pages without blocking them, so visitors can keep reading and clicking while one is open.

Get Mosaic

Read the docs

Build your first popover, start to finish

Add a ready-made popover from the library, open it on page load, scroll depth, exit intent or a click, then pin it to the screen or anchor it to a button and animate how it opens.

Mosaic in Depth

•

7 min

Ready in every theme

Blank, Monolith and Gibraltar each ship eleven popovers in their Parts library. Here are twelve of them, mixed across the three.

Where a popover fits best

Six everyday jobs, each one a single Popover.
Click or hover the demo at the top of each card.

Help tip

A short tip that opens beside a help icon on hover and closes as the pointer moves on.

Share menu

Share buttons that open under their button on a click, while the page stays clickable.

Built with Mosaic

Link preview

Text and an image that open while the pointer rests on a link.

Support form

A whole contact form inside a popover, filled in without leaving the page.

Pinned notice

A notice pinned to a corner of the screen that stays put while the page scrolls.

Page feedback

A yes or no question beside its button, answered without a page reload.

Pin it or attach it

One setting, Position, decides it. Attach the popover when it is about one thing on the page, and pin it to the screen when it is about the page as a whole.

Attach it to an element

It opens right next to the field it explains, so a hint never drifts away from its input and visitors always know where it belongs.

Any element as the anchor, or the one that opened it
Above, below, start or end of the anchor
Snap flips it when it would leave the screen

Pin it to the screen

It stays fixed in one spot in the browser window, so a notice never leaves the screen, wherever visitors scroll.

Nine spots, from the corners to the center
Stays put while the page scrolls under it
Bottom right until you pick another spot

Opens and closes exactly when you want it to

Let it open by itself or wire it to any click, then decide how often a visitor sees it and which of their moves can close it again, the outside click and the Esc key included.

On click or hover

Open, close or toggle it from a click or hover on a button or any other element.

On page load

It shows as soon as the page has finished loading, after a delay if you set one.

On scroll depth

It holds back until the visitor has scrolled a set distance down the page.

On exit intent

It opens when the visitor looks ready to leave the page, on desktop screens.

Popover or Modal?

Both float above the page and open on the same triggers. What sets them apart is whether the visitor can keep using the page while one is open, so that decides which you need.

Popover

Modal

What it means for you

While it is open

The page behind it stays live, every link and button still works

The page dims, stops scrolling and ignores clicks until it closes

Choose the Popover whenever people should keep reading around it

Where it shows

Wherever you place it, so it can point straight at what it explains

Always the middle of the screen, no matter which button opened it

When its spot on the page tells people something, use a popover

Keyboard

Tab moves past it to the next thing on the page, nothing is trapped

Tab loops inside the window and stays there until the window closes

Only the Modal keeps keyboard focus until the visitor is finished

Closing it

Its own close button, plus Esc and outside clicks once you turn them on

A click on the dimmed overlay or the Esc key, both on by default

Turn on Esc and outside clicks so small popovers are quick to dismiss

Long content

It grows and shrinks to fit exactly what you put inside it, nothing more

The window scrolls on its own once its content is taller than the screen

Keep popovers short, and give long reads a Modal of their own

When to use it

When the visitor should be free to ignore it and simply carry on

When the visitor has to answer or decide something before going on

Ask whether the content can wait. If it can, make it a popover

As flexible as any element

A Popover is a container like a Div, so your classes, states and interactions all work on it, and the details visitors only notice when they are missing come built in.

Your classes

Your classes style it, plus a Flipped state for when Snap moves it.

Your animation

Show, Before close and After close, and the exit always finishes.

Screen readers

A label, a role and a live region that announces it as it opens.

Edited in place

You build it open on the canvas, so you style it right where it shows.

More elements to explore

These are the elements a popover works best with, each one with its own guide.

Popover questions, answered

The details that come up once you start building with it, from closing behavior to phones. The docs cover every setting, and our team answers anything that is still unclear.

Which Mosaic plans include the Popover?: Every plan. The Popover sits in the Add panel with every other element, on Personal, Creator and Agency alike, and nothing about it is held back for a higher plan or sold as an extra add on.
Can several buttons open the same popover?: Yes. One popover can serve a whole row of icons or buttons, and it opens beside whichever one was used, so there are no copies to keep in sync when the content inside it changes later.
Why does my popover not close when I click outside it?: Close on is set to Nothing by default, so it waits for a Close or Toggle action, like the close button it comes with. Switch Close on to Everything to let outside clicks and the Esc key close it too.
Does it work on phones?: Yes. Phones have no pointer to hover with, so open it on a tap there. Exit intent only fires on desktop, so for a popover that should also open on phones, pick scroll depth instead.
Where does a popover show if it opens by itself?: A popover that opens on page load, scroll or exit intent has no trigger to sit beside, so without an anchor it appears in the center. Pin it to a screen spot or pick an anchor element.
Can I put a form, a video or a Modal inside it?: Yes. It holds any element, and Popovers and Modals can sit inside each other in either order. Closing the outer one closes everything that was opened inside it as well, so nothing is left hanging.
Can I show it only once to each visitor?: Yes. Give the trigger that opens it a run rule. It can open once per visitor, once every set period or up to a set number of times, so nobody gets greeted by the same notice on every page.
How do I add my first popover?: Add it from the Add panel, then edit the heading, text and close button it comes with and choose where it shows on the page. The Popover docs walk through every one of its settings in order.