Popover

Extended tooltip with a structured layout: icon, highlighted title and multiline description. Built on top of Tooltip and inherits its entire API (positioning, control, interactivity).

When to use

✅ Use when…	🚫 Avoid when…
To explain features in dense interfaces (contextual helper text). When the content needs more than one line — title + description. In spots where a modal would be too heavy (excessive interruption).	For feedback on an action (success/error). Use `Notification`. For short one-word/one-phrase text. Use `Tooltip`. As a blocking dialog. Use `Modal`.

Example

<Popover
  title="Popover example"
  description="Lorem ipsum dolor sit amet."
  icon={<Icon icon={upload} />}
>
  <IconButton icon={<Icon icon={playCircle} />} />
</Popover>
 
<Popover
  inverted
  title="Popover example"
  description="Lorem ipsum dolor sit amet."
  icon={<Icon icon={upload} />}
>
  <IconButton icon={<Icon icon={emojiAngry} />} />
</Popover>

Properties


Prop	Type	Default	Description
`children *`	`ReactNode`	—	Element the tooltip is anchored to. Strings are wrapped in `BaseText`.
`description *`	`string`	—	Description/body of the popover. Unlike the tooltip, it is multiline and required — it is the reason the `Popover` exists beyond the tooltip.
`icon`	`ReactNode`	—	Icon displayed to the left of the title.
`interactive`	`boolean`	—	Legacy no-op — kept only for API compatibility. In `vendors/TippyHeadless` this prop enabled Tippy's "interactive" mode. With `vendors/FloatingUI`, the floating tooltip is already inherently interactive (hover/focus over the tooltip itself does not trigger dismiss). Can be removed once consumers are cleaned up. @deprecated
`inverted`	`boolean`	—	Inverts the color scheme (light background with dark text). Useful on already-dark surfaces.
`noArrow`	`boolean`	—	Hides the arrow pointing at the anchored element.
`onDismiss`	`(() => void)`	—	Called when the user clicks outside the tooltip. Required with `visible`.
`title`	`string`	—	Title displayed prominently at the top of the popover.
`visible`	`boolean`	—	Controlled visibility. When set, `onDismiss` is required (the component throws if it is missing).

Besides the props above, every component accepts the layout props (spacing, color, flex/grid, sizing, border) — not repeated here.

Popover

When to use

Example

Properties

See also