Skip to main content
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

  1. Import Tooltip, makeUId and showTooltip after installation.
import { Tooltip, makeUId, showTooltip } from "@k2/utils";
  1. Define a unique ID.
const tooltipId = makeUId();
  1. invoke showTooltip on onMouseEnter event on any element.
<button onMouseEnter={e => showTooltip(e.target, "tooltip message", tooltipId)}>
Sample
</button>
  1. Render Tooltip component in parent component.
const Parent = props => {
// ...
return (
<>
{/* JSX */}
<Tooltip id={tooltipId} />
{/* JSX */}
</>
);
};

Props

PropertyTypeRequiredDefault valueDescription
idstringnoNoneUnique Id for the Tooltip
borderColorstring | (data: any) => stringno"rgb(32, 32, 32)"Border color of Tooltip
formatterstring | (params: { data: any }) => React.ReactElementnoNoneFormatter for the Tooltip content
component(props: { data: any }) => React.ReactElementnoNoneCustom component for the Tooltip
showArrowbooleannotrueShows Tooltip arrow if true
type"light" | "dark" | "light-default"no"light-default"Type of Tooltip
classNamestringnoNoneClass applied to the root element of Tooltip
classesClassesnoNoneClass applied to the root element of Tooltip
styleCSSPropertiesnoNoneStyles applied to the root element of Tooltip

Custom Types

Classes

Classes enable customization and styling of Tooltip elements through their classes.

ClassNameTypeDefault valueDescription
rootstringNoneApplied to root element of Tooltip.
contentstringNoneApplied to body of Tooltip.

Please see Class Specificity for correctly defining it.