Popover
The floating box popped by clicking or hovering.
General
The basic Popover usage.
Menu
Preset Item
Use preset Item component build layout.
Menu
Close Manual
You can control when to close the pop-up box.
Menu
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',
Previous
Pagination
Next
Progress
MADE & DESIGNED WITHBY BRUNO ANDRADE
