Tooltip
Import
import { VKTooltip } from "@vivakits/react-components";Content
The Tooltip component can display any content passed to it using the content prop.
Position
The Tooltip component can be positioned in various ways using the position prop.
Responsive
The Tooltip component can be made responsive using the responsive prop.
Caret
The Tooltip component allows you to toggle the caret on and off using the caret prop.
Close Button
The Tooltip component can display a close button using the closeButton prop.
Max width
The Tooltip component can have a maximum width using the maxWidth prop. The tooltip will not resize beyond this width automatically.
Custom Class
You can customize the Tooltip using the className, caretColor and wrapperClassName prop.
API Reference
| Attribute | Type | Description | Default |
|---|---|---|---|
| children | Displays tooltip triggering text | - | |
| wrapperClassName | string | Classname for the popconfirm trigger | - |
| content | string, React.node | Content of the tooltip | - |
| position | toptopLefttopRightleftbottombottomLeftbottombottomRight | Position of the tooltip | top |
| responsive | boolean | Whether the tooltip is responsive | false |
| caret | boolean | Whether to show the caret | true |
| closeButton | boolean | Whether to show the close button | false |
| maxWidth | string | Maximum width of the tooltip | 250px |
| className | string | Classname for the tooltip | - |
| caretColor | string | Color of the caret | - |