Tooltip
Tooltips will appear when users hover on an element, it display contextual information related to the element.
Basic
Basic usage of Tooltip.
Hover me
Customize
Tooltip content can be customize as well.
Hover me
Placement
There are 9 placement options for tooltip, it occupies the top position by default.
Top start
Top
Top end
Left start
Right start
Left
Right
Left end
Right end
Bottom start
Bottom
Bottom end
API
Tooltip
| Prop | Description | Type | Default |
|---|---|---|---|
| disabled | Whether to disable tooltip toggle | boolean | - |
| isOpen | Whether to display tooltip by default | boolean | false |
| placement | Tooltip placement | 'top' | 'top-start' | 'top-end' | 'bottom' | 'bottom-start' | 'bottom-end' | 'right' | 'right-start' | 'right-end' | 'left' | 'left-start' | 'left-end' | 'top' |
| title | Tooltip content | string | ReactNode | |
| wrapperClass | Class for tooltip wrapper | string | - |