Skip to main content
Frontend Glossary

UI components · Feedback

Popover

Also called: Popconfirm, Popup card, Flyout, Hover card

A small card that pops up next to an element when you click or hover it. It can hold a title, a few lines of text, or even buttons.

Click “Labeled” to see what each part is called.

How to tell AI

Swap in your own content first

When I click a user's avatar, show a 280px-wide popover right below it, with a small arrow pointing at the avatar. Inside, show the avatar, display name, bio, and a "Message" button. Close it when I click outside the card or press Esc. When it's close to the screen edge, flip it to the other side automatically.

Send to

01Decide

Does your content look like this?

Check both columns to confirm Popover is what you need.

Use Popover when

  • Hovering or clicking an item needs to show a few lines of extra info or a profile card right there
  • Before a single action like delete or recall, you need a quick confirmation next to the button
  • You need a few settings or filter options next to a button that close once they're changed

Pick something else when

  • You only need one line of plain text to explain an icon or button; a tooltip is lighter

    Use insteadTooltip

  • The content includes a long form or a multi-step task that needs the user's full attention

  • The user must make a decision before the flow can continue

Not sure? Upload a screenshot and page analysis will check which layout each block should use.

02Pitfalls

Common misuse

It looks like it works, but it makes things harder for users.

  1. 01

    The popover opens on hover but has buttons inside, so it vanishes as soon as the mouse moves toward it

  2. 02

    Stuffing a long form or long list into the card, so it runs off the screen and needs its own scrolling

  3. 03

    Forgetting to set the stacking order, so the card hides behind a table's fixed column or the top nav

03Spot it

How to spot it

Look at the overall structure first, then check a few features you can spot at a glance.

Structure

A trigger element plus a floating card. The card has a small arrow pointing at the trigger and can contain a title, a content area, and action buttons.

PartsClick one to highlight it in the wireframe above

04Explained

In detail

A popover opens right next to the element that triggered it, with a small arrow pointing back at it. It doesn't cover the whole page and has no backdrop. Click outside the card or click the trigger again and it closes. Common uses: a profile card that pops up from an avatar, a small "Delete this?" confirmation next to a Delete button (Ant Design calls this Popconfirm), and filter options that open from a table header.

How it differs from a Tooltip: a tooltip holds one line of plain text, shows on hover, and disappears when you move away. A popover can hold a title, images, and buttons, and users can move the mouse into it and use them. How it differs from a Modal: a modal opens in the center, covers the whole page, and has to be dealt with before you can continue. A popover takes up only a small area and holds light, extra information.

Developer info
Term ID
component-popover
DOM selectors

The extension matches these CSS selectors when it inspects a page locally (tags, ARIA roles, common component library classes).

  • .ant-popover
  • .el-popover
  • [class*="MuiPopover-paper"]
  • .arco-popover-content
  • .n-popover:not(.n-tooltip)
  • [data-slot="popover-content"]
  • .popover
  • [popover]:not([role="tooltip"])
Priority
1 · when several match at the same level, the higher priority wins
Version
v2 · updated Sep 29, 2026