Tooltip
Displays additional information on hover.
General
Basic usage.
Tooltip
Trigger
Trigger by click.
Click me
With Components
Combined with different components.
Custom Content
You can customize the pop-up content.
Top
Bottom
Types
Different state.
Dark
Success
Warning
Error
Secondary
Variant
Special styles.
Lite
No Arrow
Placements
There are 12 placement options available.
topStart
top
topEnd
leftStart
rightStart
left
right
leftEnd
rightEnd
bottomStart
bottom
bottomEnd
APIs
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',
Previous
Toggle
MADE & DESIGNED WITHBY BRUNO ANDRADE
