Version: 1.2.0
Tooltip
Tooltips are used to display more information about any particular data, it shows when user hover over on an element.
Usage
- Import
Tooltip
,makeUId
andshowTooltip
after installation.
- Define a unique ID.
- invoke
showTooltip
ononMouseEnter
event on any element.
- Render Tooltip component in parent component.
Props
Property | Type | Required | Default value | Description |
---|---|---|---|---|
id | string | no | None | Unique Id for the Tooltip |
borderColor | string | (data: any) => string | no | "rgb(32, 32, 32)" | Border color of Tooltip |
formatter | string | (params: { data: any }) => React.ReactElement | no | None | Formatter for the Tooltip content |
component | (props: { data: any }) => React.ReactElement | no | None | Custom component for the Tooltip |
showArrow | boolean | no | true | Shows Tooltip arrow if true |
type | "light" | "dark" | "light-default" | no | "light-default" | Type of Tooltip |
className | string | no | None | Class applied to the root element of Tooltip |
classes | Classes | no | None | Class applied to the root element of Tooltip |
style | CSSProperties | no | None | Styles applied to the root element of Tooltip |
Custom Types
Classes
Classes enable customization and styling of Tooltip elements through their classes.
ClassName | Type | Default value | Description |
---|---|---|---|
root | string | None | Applied to root element of Tooltip. |
content | string | None | Applied to body of Tooltip. |
Please see Class Specificity for correctly defining it.