Popover

The floating card popped by clicking or hovering.

Popover

When to use

A simple popup menu to provide extra information or operations.


Basic

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

Three ways to trigger

Mouse to click, focus and move in.

Controlling the close of the dialog

Use visible prop to control the display of the card.

Placement

There are 12 placement options available.








Hover with click popover

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

API

PropertyDescriptionTypeDefault
content
Content of the card
string | ReactNode | () => ReactNode
-
title
Title of the card
string | ReactNode | () => ReactNode
-