@highlight-ui/tooltip NPM

@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={<Body>This is the tooltip text.</Body>}
      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.

@highlight-ui/utils-commons @highlight-ui/utils-hooks @highlight-ui/utils-portal-manager @popperjs/core

@infinitebrahmanuniverse/nolb-_hig @everything-registry/sub-chunk-395 @zalastax/nolb-_hig @highlight-ui/dialog @highlight-ui/file-management @highlight-ui/form-field @highlight-ui/sandbox-form-field @highlight-ui/toggle-input

1 year ago

1 year ago

11 months ago

1 year ago

1 year ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

4 years ago

3 years ago

3 years ago

3 years ago

3 years ago

4 years ago

3 years ago

4 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

4 years ago

3 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago