Figma Popover

Preview

Figma Popover

Figma Popover Component

The Popover displays content over the main UI in a floating window. A Popover shows relevant information, tips, or extra controls in a floating window. The Popover's tail points to an element or highlights an area that requires explanation.

Use the Popover component to appear near the triggering element with a close-on outside click or Esc button press.

Popover Anatomy

Set	Variants	Properties
Popover	26	Size Medium, LargeDirection None, Bot Left ↙, Top Left ↖, Left Top ->, Right Top ->, Bot Center ↓, Top Center ↑, Left Center ->, Right Center ->, Bot Right ↘, Top Right ↗, Left Bot ->, Right Bot ->

Popover is one set of 26 variants — Medium and Large sizes with a tail pointing in twelve directions from Top Left to Right Bottom, or None — a floating window anchored to a trigger that closes on outside click or Escape.

Popover AI Prompt

Paste this into Claude, ChatGPT, or Figma Make:

Build a popover component in Figma as one set of 26 variants: Medium and Large widths, each with a Direction property of None plus twelve tail positions — Top Left, Top Center, Top Right, Bottom Left, Bottom Center, Bottom Right, Left Top, Left Center, Left Bottom, Right Top, Right Center and Right Bottom. Body: a rounded white card with a soft shadow holding a bold title, a short paragraph and an optional footer with a secondary and a primary button, plus a close icon in the corner. Tail: a small triangle rotated and offset per direction so it points at the trigger element. Add Booleans for the title, footer and close icon, and a content slot frame so any component can be dropped inside. Build three examples: a filter popover under a button with a checkbox list and Apply; a user card popover on avatar hover with name, role and a Follow button; and a date-range popover holding two calendar sheets. Wire a prototype where clicking the trigger opens the Bottom Center variant and clicking outside closes it.

Source