Flutter docs
Default skin

Popover

The floating card pops up when clicking/mouse hovering over an element.

When to use

A simple popup menu to provide extra information or operations.

Comparing with Tooltip, besides information Popover card can also provide action elements like links and buttons.

Examples

Basic

The most basic example. The size of the floating layer depends on the contents region.

Placement

There are 12 placement options available.

Auto Shift

Auto adjust Popup and arrow position when Popover is close to the edge of the screen. Will be out of screen when exceed limitation.

Hover with click popover

The following example shows how to create a popover which can be hovered and clicked.

Three ways to trigger

Mouse to click, focus and move in.

Arrow

Hide arrow by arrow.

Controlling the close of the dialog

Use open prop to control the display of the card.

Custom semantic dom styling

You can customize the semantic dom style of Popover by passing objects/functions through classNames and styles.

API

Popover are exported from @ceebee/ui/client.

Popover

PropertyDescriptionTypeDefaultVersion
classNamesCustomize class for each semantic structure inside the component. Supports object or function.Record<SemanticDOM, string> | (info: { props })=> Record<SemanticDOM, string>-—
contentContent of the cardReactNode | () => ReactNode-—
titleTitle of the cardReactNode | () => ReactNode-—
stylesCustomize inline style for each semantic structure inside the component. Supports object or function.Record<SemanticDOM, CSSProperties> | (info: { props })=> Record<SemanticDOM, CSSProperties>-—