Popover

The floating box popped by clicking or hovering.

Default

Preset Item

Use preset Item component build layout.

Close Manual

You can control when to close the pop-up box.

APIs

Popover.Props

AttributeDescriptionTypeAccepted valuesDefault
contentcontent of pop-upReactNode () => ReactNode--
visiblevisible or notboolean-false
initialVisiblevisible on initialboolean-false
hideArrowhide arrow iconboolean-false
placementposition of the popover relative to the targetPlacement-bottom
triggertooltip trigger mode'click' / 'hover'-click
enterDelay(ms)delay before popover is shownnumber-100
leaveDelay(ms)delay before popover is hiddennumber-0
offset(px)distance between pop-up and targetnumber-12
portalClassNameclassName of pop-up boxstring--
onVisibleChangecall when visibility of the popover is changed(visible: boolean) => void--
disableItemsAutoCloseprevent close Popover when Items clickedboolean--
...native propsHTMLAttributes'id', 'name', ...-

Popover.Item[alias: Popover.Option]

AttributeDescriptionTypeAccepted valuesDefault
lineshow a lineboolean-false
titleshow text with title styleboolean-false
disableAutoCloseprevent close Popover when clickedboolean-false

Placement

type Placement = 'top'
  | 'topStart',
  | 'topEnd',
  | 'left',
  | 'leftStart',
  | 'leftEnd',
  | 'bottom',
  | 'bottomStart',
  | 'bottomEnd',
  | 'right',
  | 'rightStart',
  | 'rightEnd',