npm package: @highlight-ui/tooltip
Description: Tooltip component for Highlight UI library
Author: Personio GmbH & Co. KG
Latest version: 4.4.3

[![npm](https://img.shields.io/npm/v/@highlight-ui/tooltip)](https://www.npmjs.com/package/@highlight-ui/tooltip)
[![personio.design](https://img.shields.io/static/v1?label=Personio&message=zeroheight&color=yellow)](https://www.personio.design/40d648a47/v/0/p/338a72-tooltip/b/61d4aa)
[![storybook.personio.design](https://img.shields.io/static/v1?label=Personio&message=storybook&color=red)](https://storybook.personio.design/?path=/story/feedback-tooltip--basic-tooltip)

# @highlight-ui/tooltip

Using npm:

```bash
npm install @highlight-ui/tooltip
```

Using yarn:

```bash
yarn add @highlight-ui/tooltip
```

Using pnpm:

```bash
pnpm install @highlight-ui/tooltip
```

In your (S)CSS file:

```scss
@import url('@highlight-ui/tooltip');
```

Once the package is installed, you can import the library:

```ts
import { Tooltip } from '@highlight-ui/tooltip';
```

## Usage

```tsx
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](https://www.personio.design/40d648a47/v/0/p/338a72-tooltip/b/61d4aa) for usage guidelines and visual examples.

If you're interested in contributing, please visit our [contribution page](https://www.personio.design/40d648a47/v/0/p/138faf-about-the-process).