The floating box popped by clicking or hovering.
Use preset Item
component build layout.
You can control when to close the pop-up box.
Popover.Props
Attribute | Description | Type | Accepted values | Default |
---|---|---|---|---|
content | content of pop-up | ReactNode () => ReactNode | - | - |
visible | visible or not | boolean | - | false |
initialVisible | visible on initial | boolean | - | false |
hideArrow | hide arrow icon | boolean | - | false |
placement | position of the popover relative to the target | Placement | - | bottom |
trigger | tooltip trigger mode | 'click' / 'hover' | - | click |
enterDelay(ms) | delay before popover is shown | number | - | 100 |
leaveDelay(ms) | delay before popover is hidden | number | - | 0 |
offset(px) | distance between pop-up and target | number | - | 12 |
portalClassName | className of pop-up box | string | - | - |
onVisibleChange | call when visibility of the popover is changed | (visible: boolean) => void | - | - |
disableItemsAutoClose | prevent close Popover when Items clicked | boolean | - | - |
... | native props | HTMLAttributes | 'id', 'name', ... | - |
Popover.Item
[alias: Popover.Option
]Attribute | Description | Type | Accepted values | Default |
---|---|---|---|---|
line | show a line | boolean | - | false |
title | show text with title style | boolean | - | false |
disableAutoClose | prevent close Popover when clicked | boolean | - | false |
Placement
type Placement = 'top'
| 'topStart',
| 'topEnd',
| 'left',
| 'leftStart',
| 'leftEnd',
| 'bottom',
| 'bottomStart',
| 'bottomEnd',
| 'right',
| 'rightStart',
| 'rightEnd',