Popover

The floating card popped by clicking or hovering.

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

import { Position, Popover } from 'tailor-ui';

Basic

Positioning

With content hide

With onVisibleChange

Popover with Select

Nested Usage

API

Property	Description	Type	Default
defaultVisible	Whether the floating popover card is visible by default	boolean
visible	Whether the floating popover card is visible	boolean
onVisibleChange	Callback executed when visibility of the popover card is changed	(visible: boolean) => void
position	The position base on the children component	Positions	Position.TOP
title	A string or react component inside this popover. If you are using click to trigger, it can be a function that with hide callback as first argument	ReactNode | (handleClose: () => void) => ReactNode
content	A string or react component inside this popover. If you are using click to trigger, it can be a function that with hide callback as first argument	ReactNode | (handleClose: () => void) => ReactNode
onOpenComplete	Whether to mount child components on onClose	() => void
onCloseComplete	Whether to unmount child components on onClose	() => void
Wrapper	The wrapper of popover content	ComponentType