@highlight-ui/tooltip

@highlight-ui/tooltip

Using npm:

npm install @highlight-ui/tooltip

Using yarn:

yarn add @highlight-ui/tooltip

Using pnpm:

pnpm install @highlight-ui/tooltip

In 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';

Usage

import React from 'react';
import { Tooltip } from '@highlight-ui/tooltip';

export default function TooltipExample() {
  return (
    <Tooltip
      content={<span>This is the tooltip text.</span>}
      placement="top"
      interactive
    >
      <b>Hover me</b>
    </Tooltip>
  );
}

Props 📜

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

Custom types 🔠

Type	Values	Description
MouseDelayVariant	'none', 'medium', 'long'	Used by the mouseEnterDelay and mouseOutDelay props. none = 0, medium = 375, long = 1000

Contributing 🖌️

Please visit personio.design for usage guidelines and visual examples.

If you're interested in contributing, please visit our contribution page.