Tooltip

Tooltips are used to display more information about any particular data, it shows when user hover over on an element.

Usage

1. Import Tooltip, makeUId and showTooltip after installation.

import { Tooltip, makeUId, showTooltip } from "@k2/utils";

2. Define a unique ID.

const tooltipId = makeUId();

3. invoke showTooltip on onMouseEnter event on any element.

<button onMouseEnter={e => showTooltip(e.target, "tooltip message", tooltipId)}>

Sample

</button>

4. Render Tooltip component in parent component.

const Parent = props => {

// ...

return (

<>

{/* JSX */}

<Tooltip id={tooltipId} />

{/* JSX */}

</>

);

};

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.