Popover blocks

A popover is a small panel anchored to a trigger, usually with a tail pointing back at it, holding content that is too large for a tooltip and too minor to justify a modal.

Get Pro to installPro15 blocksReact, Vue and Figma

MCP

ProjectsSpring launch · 4 projects

Website refreshDue 14 NovIn review
Q4 campaignDue 21 NovActive
Brand guidelinesDue 2 DecDraft
Mobile onboardingDue 9 DecActive

Every block in the set#

Context Popover

Product tours and feature tips that point at the thing they explain

Context popover, the tip waits for you to do it

Learning a screen by using it: first-run checklists that notice what people do

Context popover, quiet dots on what’s new, a hover card each

Announcing a few new features without interrupting anyone

Links popover

Share sheets: the link, who can open it and where to send it

Links popover, people first; the link reads as one sentence

Invite sheets where who has access matters more than the link

Links popover, link, QR code, embed

Handing a link over three ways: to paste, to scan on a phone, or to embed in a page

Data Popover

Chart tooltips that need to say which day they describe, dashboard drill-downs

Data Popover, a hover card that travels with you

Dense charts where people scan across the bars and only some of them pin one to look closer

Data Popover, the legend opens what it names

Dashboards where each legend entry has a breakdown of its own

Metric Popover

Dashboard KPI drill-downs, report call-outs

Metric Popover, where you should be today, drawn on the bar

KPI call-outs that should say whether the number is on schedule

Metric Popover, thirteen weeks under your pointer

Tiles with a sparkline that open onto the full trend

Password Popover

Sign-up and reset forms: say what a password still needs while it is typed

Password Popover, the padlock fills, the card stands beside

Sign-up forms where the button under the field must stay in view

Password Popover, offer a strong one, roll it in

Sign-up forms that would rather hand over a strong password than grade a weak one

When to use#

A chart point needs a readout carrying links or actions a tooltip cannot hold
A share action needs channels and a link field without sending the page to a modal
A password field needs its rules visible beside it while someone is typing
A single piece of guidance has to point at the control it is describing

The whole set, with its codePro

Pro opens the Code tab on every block here, in React and Vue, plus the Figma file and the MCP server for your editor.

Open in Blocks See plans