Popover
The floating box popped by clicking or hovering.
General
The basic Popover usage.
Preset Item
Use preset Item component build layout.
Close Manual
You can control when to close the pop-up box.
APIs
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',