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' ... | - |
TooltipTypestype TooltipTypes =
| 'default'
| 'secondary'
| 'success'
| 'warning'
| 'error'
| 'dark'
| 'lite'
Placementtype Placement = 'top'
| 'topStart',
| 'topEnd',
| 'left',
| 'leftStart',
| 'leftEnd',
| 'bottom',
| 'bottomStart',
| 'bottomEnd',
| 'right',
| 'rightStart',
| 'rightEnd',