Displays additional information on hover.
Basic usage.
Trigger by click.
Combined with different components.
You can customize the pop-up content.
Different state.
Special styles.
There are 12 placement
options available.
Tooltip.Props
Attribute | Description | Type | Accepted values | Default |
---|---|---|---|---|
text | text of pop-up | string React.ReactNode | - | - |
visible | visible or not | boolean | - | false |
initialVisible | visible on initial | boolean | - | false |
hideArrow | hide arrow icon | boolean | - | false |
type | preset style type | TooltipTypes | - | default |
placement | position of the tooltip relative to the target | Placement | - | top |
trigger | tooltip trigger mode | 'click' / 'hover' | - | hover |
enterDelay(ms) | delay before tooltip is shown | number | - | 100 |
leaveDelay(ms) | delay before tooltip is hidden (only work in 'hover' mode) | number | - | 150 |
offset(px) | distance between pop-up and target | number | - | 12 |
portalClassName | className of pop-up box | string | - | - |
onVisibleChange | call when visibility of the tooltip is changed | (visible: boolean) => void | - | - |
... | native props | HTMLAttributes | 'id' ... | - |
TooltipTypes
type TooltipTypes =
| 'default'
| 'secondary'
| 'success'
| 'warning'
| 'error'
| 'dark'
| 'lite'
Placement
type Placement = 'top'
| 'topStart',
| 'topEnd',
| 'left',
| 'leftStart',
| 'leftEnd',
| 'bottom',
| 'bottomStart',
| 'bottomEnd',
| 'right',
| 'rightStart',
| 'rightEnd',