Using npm:
npm install @highlight-ui/tooltipUsing yarn:
yarn add @highlight-ui/tooltipUsing pnpm:
pnpm install @highlight-ui/tooltipIn your (S)CSS file:
@import url('@highlight-ui/tooltip');Once the package is installed, you can import the library:
import { Tooltip } from '@highlight-ui/tooltip';import React from 'react';
import { Tooltip } from '@highlight-ui/tooltip';
export default function TooltipExample() {
return (
<Tooltip
content={<Body>This is the tooltip text.</Body>}
placement="top"
interactive
>
<b>Hover me</b>
</Tooltip>
);
}| Prop | Type | Required | Default | Description |
|---|---|---|---|---|
content |
React.ReactNode |
Yes | Content rendered inside the tooltip pop-up | |
children |
React.ReactNode |
Yes | The element which triggers the tooltip pop-up | |
id |
string |
No | id of the tooltip | |
component |
'span', 'div' |
No | span |
Create custom trigger element |
mouseEnterDelay |
MouseDelayVariant |
No | none |
Mouse enter delay specifying how long a tooltip takes before becoming visible |
mouseOutDelay |
MouseDelayVariant |
No | none |
Mouse out delay specifying how long a tooltip stays visible after hovering out |
placement |
'top', 'left', 'bottom', 'right' |
No | top |
Placement of the tooltip |
interactive |
boolean |
No | true |
Whether tooltip text stays visible when user moves the pointer over its content (requires long mouseOutDelay) |
className |
string |
No | Allows providing a custom class name |
| Type | Values | Description |
|---|---|---|
MouseDelayVariant |
'none', 'medium', 'long' |
Used by the mouseEnterDelay and mouseOutDelay props. none = 0, medium = 375, long = 1000 |
Please visit personio.design for usage guidelines and visual examples.
If you're interested in contributing, please visit our contribution page.