React Tooltip

https://react-tooltip.com/docs/
Admin
React Tooltip is a flexible React component library for displaying contextual information in...
Tokens:16,562
Snippets:162
Trust Score:7.2
Update:6 months ago
Show doc for...
Tokens:
Raw
### Install ReactTooltip

Source: https://react-tooltip.com/docs/troubleshooting

Commands to install the latest version of the library.

```bash
npm install react-tooltip@latest
```

```bash
yarn add react-tooltip@latest
```

--------------------------------

### Install ReactTooltip using npm

Source: https://react-tooltip.com/docs/getting-started

Use this command to install the react-tooltip package via npm.

```bash
npm install react-tooltip  

```

--------------------------------

### Install ReactTooltip using yarn

Source: https://react-tooltip.com/docs/getting-started

Use this command to install the react-tooltip package via yarn.

```bash
yarn add react-tooltip  

```

--------------------------------

### V4 Basic Tooltip Example

Source: https://react-tooltip.com/docs/upgrade-guide/basic-examples-v4-v5

This example shows how to implement a basic tooltip in ReactTooltip V4 using `data-for` and `data-tip` attributes.

```javascript
import ReactTooltip from 'react-tooltip';  
  
<a  
  data-tip="Hello world!"  
  data-for="tooltip"  
>
  ◕‿‿◕  
</a>  
<ReactTooltip id="tooltip" place="top" />  

```

--------------------------------

### Setup TooltipProvider in App

Source: https://react-tooltip.com/docs/examples/provider-wrapper

Wrap the application root with TooltipProvider to enable tooltip functionality throughout the component tree.

```javascript
// this is usually the `src/App.jsx` (or `src/App.tsx`) file  
import { TooltipProvider } from 'react-tooltip'  
  
function App() {  
  return (  
    <TooltipProvider>  
      <MyComponent />  
    </TooltipProvider>  
  )  
}  
  
export default App
```

--------------------------------

### Import Tooltip component

Source: https://react-tooltip.com/docs/getting-started

Import the Tooltip component from the react-tooltip library after installation.

```javascript
import { Tooltip } from 'react-tooltip'  

```

--------------------------------

### V5 Basic Tooltip using Tooltip Props

Source: https://react-tooltip.com/docs/upgrade-guide/basic-examples-v4-v5

This example shows how to implement a basic tooltip in ReactTooltip V5 by selecting anchor elements with a CSS selector and providing content via props.

```javascript
import { Tooltip } from 'react-tooltip';  
  
<a className="my-anchor-element">◕‿‿◕</a>  
<a className="my-anchor-element">◕‿‿◕</a>  
<Tooltip anchorSelect=".my-anchor-element" content="Hello world!" />  

```

--------------------------------

### Adjust Tooltip Padding

Source: https://react-tooltip.com/docs/examples/styling

Examples for removing or increasing the padding of the tooltip.

```jsx
import { Tooltip } from 'react-tooltip'  
  
<style>  
.example-container .example-no-padding {  
  padding: 0;  
}  
</style>  
  
<div className="example-container">  
  <a data-tooltip-id="my-tooltip-no-padding" data-tooltip-content="Hello world!">  
    ◕‿‿◕  
  </a>  
  <Tooltip id="my-tooltip-no-padding" className="example-no-padding" />  
</div>
```

```jsx
import { Tooltip } from 'react-tooltip'  
  
<style>  
.example-container .example-padding {  
  padding: 48px;  
}  
</style>  
  
<div className="example-container">  
  <a data-tooltip-id="my-tooltip-padding" data-tooltip-content="Hello world!">  
    ◕‿‿◕  
  </a>  
  <Tooltip id="my-tooltip-padding" className="example-padding" />  
</div>
```

--------------------------------

### Set Tooltip Placement with place Prop

Source: https://react-tooltip.com/docs/examples/place

Control the tooltip's placement dynamically using the `place` prop. This example cycles through positions on click.

```javascript
import { Tooltip } from 'react-tooltip';

const PLACES = ['top', 'top-start', 'top-end', 'right', 'right-start', 'right-end', 'bottom', 'bottom-start', 'bottom-end', 'left', 'left-start', 'left-end']
const [place, setPlace] = useState(0)

<a
  data-tooltip-id="my-tooltip"
  onClick={() => setPlace(p => (p + 1) % 12)}  
>
  ◕‿‿◕
</a>
<Tooltip
  id="my-tooltip"
  content={`I'm on the ${PLACES[place]}`}
  place={PLACES[place]}
/>
```

--------------------------------

### V5 Basic Tooltip using Data Attributes

Source: https://react-tooltip.com/docs/upgrade-guide/basic-examples-v4-v5

This example demonstrates a basic tooltip in ReactTooltip V5 using the updated `data-tooltip-id` and `data-tooltip-content` attributes.

```javascript
import { Tooltip } from 'react-tooltip';  
  
<a  
  data-tooltip-id="my-tooltip"  
  data-tooltip-content="Hello world!"  
>
  ◕‿‿◕  
</a>  
<Tooltip id="my-tooltip" place="top" />  

```

--------------------------------

### Programmatic Tooltip Control with Refs

Source: https://react-tooltip.com/docs/examples/imperative-mode

Demonstrates using `useRef` to get a reference to Tooltip components, allowing programmatic control over opening and closing tooltips with custom content and positions.

```javascript
import { useRef } from 'react';
import { Tooltip, TooltipRefProps } from 'react-tooltip';

const tooltipRef1 = useRef<TooltipRefProps>(null)
const tooltipRef2 = useRef<TooltipRefProps>(null)

<a id="my-element">
  ◕‿‿◕
</a>
<button
  onClick={() => {
    tooltipRef1.current?.open({
      anchorSelect: '#my-element',
      content: 'Hello world!',
    })
    tooltipRef2.current?.open({
      position: {
        x: Math.random() * 500,
        y: Math.random() * 300,
      },
      place: 'bottom',
      content: 'Where am I? 😕😕',
    })
  }}
>
  Open
</button>
<button
  onClick={() => {
    tooltipRef1.current?.close()
    tooltipRef2.current?.close()
  }}
>
  Close
</button>
<Tooltip ref={tooltipRef1} />
<Tooltip ref={tooltipRef2} />

```

--------------------------------

### V4 Tooltip Color Example

Source: https://react-tooltip.com/docs/upgrade-guide/basic-examples-v4-v5

This example illustrates how to set a tooltip's color in ReactTooltip V4 using the `type` attribute.

```javascript
import ReactTooltip from 'react-tooltip';  
  
<a data-tip="hello world!" data-for="tooltip"> ◕‿‿◕ </a>  
<ReactTooltip id="tooltip" place="top" type="success" />  

```

--------------------------------

### Set Tooltip Placement with data-tooltip-place

Source: https://react-tooltip.com/docs/examples/place

Use the `data-tooltip-place` attribute to set the tooltip's position. This example iterates through all possible placement values.

```javascript
import { Tooltip } from 'react-tooltip';
const PLACES = ['top', 'top-start', 'top-end', 'right', 'right-start', 'right-end', 'bottom', 'bottom-start', 'bottom-end', 'left', 'left-start', 'left-end']

<a id="my-tooltip-anchor">◕‿‿◕</a>
{PLACES.map(place => (
  <Tooltip
    key={place}
    anchorSelect="#my-tooltip-anchor"
    content={`Hello world from the ${place}!`}
    place={place}
  />
))}
```

--------------------------------

### Attach Tooltip via Class

Source: https://react-tooltip.com/docs/examples/anchor-select

Use a CSS selector starting with . to target multiple elements sharing the same class.

```javascript
import { Tooltip } from 'react-tooltip';  
  
<a className="my-anchor-element-class">◕‿‿◕</a>  
<a className="my-anchor-element-class">◕‿‿◕</a>  
<a className="my-anchor-element-class">◕‿‿◕</a>  
<a className="my-anchor-element-class">◕‿‿◕</a>  
<Tooltip  
  // Don't forget the `.`!  
  anchorSelect=".my-anchor-element-class"  
  content="Hello world!"  
/>
```

--------------------------------

### Modify Border Radius

Source: https://react-tooltip.com/docs/examples/styling

Examples for removing the border radius or making the tooltip circular.

```jsx
import { Tooltip } from 'react-tooltip'  
  
<style>  
.example-container .example-no-radius {  
  border-radius: 0;  
}  
</style>  
  
<div className="example-container">  
  <a data-tooltip-id="my-tooltip-no-radius" data-tooltip-content="Hello world!">  
    ◕‿‿◕  
  </a>  
  <Tooltip id="my-tooltip-no-radius" className="example-no-radius" />  
</div>
```

```jsx
import { Tooltip } from 'react-tooltip'  
  
<style>  
.example-container .example-rounded {  
  border-radius: 50%;  
}  
</style>  
  
<div className="example-container">  
  <a data-tooltip-id="my-tooltip-rounded" data-tooltip-content="Hello world!">  
    ◕‿‿◕  
  </a>  
  <Tooltip id="my-tooltip-rounded" className="example-rounded" />  
</div>
```

--------------------------------

### V5 Tooltip Color using Variant Prop

Source: https://react-tooltip.com/docs/upgrade-guide/basic-examples-v4-v5

This example shows how to set a tooltip's color in ReactTooltip V5 using the `data-tooltip-variant` attribute. Available values include 'dark', 'light', 'success', 'warning', 'error', and 'info'.

```javascript
import { Tooltip } from 'react-tooltip';  
  
<a  
  data-tooltip-id="my-tooltip"  
  data-tooltip-content="Hello world!"  
  data-tooltip-variant="success"  
>
  ◕‿‿◕  
</a>  
<Tooltip id="my-tooltip" />  

```

--------------------------------

### Attach Tooltip via ID

Source: https://react-tooltip.com/docs/examples/anchor-select

Use a CSS selector starting with # to target a specific element ID.

```javascript
import { Tooltip } from 'react-tooltip';  
  
<a id="my-anchor-element-id">◕‿‿◕</a>  
<Tooltip  
  // Don't forget the `#`!  
  anchorSelect="#my-anchor-element-id"  
  content="Hello world!"  
/>
```

--------------------------------

### Changing Tooltip Color to Orange

Source: https://react-tooltip.com/docs/examples/styling

Example of changing the tooltip's background color to orange using a custom CSS class. This involves defining the class in a style block and applying it to the Tooltip component.

```javascript
import { Tooltip } from 'react-tooltip'  
  
<style>  
.example-container .example-orange {  
  color: #222;  
  background-color: rgb(255, 153, 0);  
}
</style>  
  
<div className="example-container">  
  <a data-tooltip-id="my-tooltip-orange" data-tooltip-content="Hello world!">  
    ◕‿‿◕  
  </a>  
  <Tooltip id="my-tooltip-orange" className="example-orange" />  
</div>  


```

--------------------------------

### Import Default Styles

Source: https://react-tooltip.com/docs/troubleshooting

Required for versions before 5.13.0 to ensure proper tooltip rendering.

```javascript
import 'react-tooltip/dist/react-tooltip.css'
```

--------------------------------

### ReactTooltip Placement Configuration

Source: https://react-tooltip.com/docs/examples/place

Configuring tooltip placement using the 'place' prop or 'data-tooltip-place' attribute.

```APIDOC
## ReactTooltip Placement Configuration

### Description
Controls the positioning of the tooltip relative to the anchor element.

### Parameters
#### Props / Attributes
- **place** (string) - Optional - The placement of the tooltip. Supported values: 'top', 'top-start', 'top-end', 'right', 'right-start', 'right-end', 'bottom', 'bottom-start', 'bottom-end', 'left', 'left-start', 'left-end'.
- **data-tooltip-place** (string) - Optional - The attribute equivalent for setting tooltip placement.

### Request Example
<Tooltip place="top" content="Hello world" />

<a data-tooltip-id="my-tooltip" data-tooltip-place="bottom">Anchor</a>
```

--------------------------------

### Import React Tooltip using the wrapper in Next.js

Source: https://react-tooltip.com/docs/troubleshooting

After creating the `ReactTooltip.tsx` wrapper, import the `Tooltip` component from your wrapper file instead of directly from `react-tooltip`.

```javascript
// ❌ OLD
import { Tooltip } from 'react-tooltip'

// ✅ NEW
import { Tooltip } from 'components/ReactTooltip'
```

--------------------------------

### Configure Tooltip Opacity

Source: https://react-tooltip.com/docs/troubleshooting

Use the opacity prop or CSS variable to avoid breaking internal state management.

```jsx
<Tooltip opacity={1} />
```

```css
:root {  
  --rt-opacity: 1;  
}
```

--------------------------------

### Tooltip Imperative Methods

Source: https://react-tooltip.com/docs/examples/imperative-mode

Methods available on the Tooltip ref to control visibility and content.

```APIDOC
## open(options)

### Description
Opens the tooltip programmatically.

### Parameters
#### Request Body
- **anchorSelect** (string) - Optional - Overrides the current selector.
- **position** (IPosition) - Optional - Overrides the position tooltip prop.
- **place** (PlacesType) - Optional - Overrides the place tooltip prop.
- **content** (ChildrenType) - Optional - Overrides the tooltip content.
- **delay** (number) - Optional - Delay in ms before opening.

## close(options)

### Description
Closes the tooltip programmatically.

### Parameters
#### Request Body
- **delay** (number) - Optional - Delay in ms before closing.
```

--------------------------------

### Optimize Dynamic Anchor Performance

Source: https://react-tooltip.com/docs/troubleshooting

Avoid creating multiple Tooltip components; use a single instance with data attributes for better performance.

```jsx
// ❌ BAD  
<div className="items-container">  
  {myItems.map(({ id, content, tooltip }) => (  
    <div key={id} className="item" data-tooltip-id={`tooltip-${id}`}>  
      {content}  
      <Tooltip id={`tooltip-${id}`} content={tooltip} />  
    </div>  
  ))}  
</div>
```

```jsx
// ✅ GOOD  
<div className="items-container">  
  {  
    myItems.map(({ id, content, tooltip }) => (  
      <div  
        key={id}  
        className="item"  
        data-tooltip-id="my-tooltip"  
        data-tooltip-content={tooltip}  
      >  
        {content}  
      </div>  
    ))  
  }  
</div>  
<Tooltip id="my-tooltip" />
```

--------------------------------

### Import ReactTooltip CSS

Source: https://react-tooltip.com/docs/getting-started

Import the CSS file for ReactTooltip. This is required for versions before v5.13.0. For v5.13.0 and newer, styles are injected by default.

```javascript
import 'react-tooltip/dist/react-tooltip.css'  

```

--------------------------------

### V4 Props Available in V5

Source: https://react-tooltip.com/docs/upgrade-guide/changelog-v4-v5

This section lists props from React Tooltip V4 that are still available in V5, along with any changes or recommended alternatives.

```APIDOC
## V4 Props Available in V5

This section details the props from React Tooltip V4 that are compatible with V5, noting any modifications or alternative approaches.

### Props

- **`children`**: Available in V5.
- **`place`**: Available in V5. Also available on the anchor element as `data-tooltip-place`.
- **`type`**: Replaced by `variant`. Also available on the anchor element as `data-tooltip-variant`.
- **`effect`**: Replaced by the `float` prop.
- **`offset`**: Available in V5. Also available on the anchor element as `data-tooltip-offset`.
- **`padding`**: Use `className` and custom CSS for styling.
- **`multiline`**: Supported by default in `content` and `html` props.
- **`border`**: Available in V5.
- **`borderClass`**: Use the `border` prop for styling.
- **`textColor`**: Use `className` and custom CSS for styling.
- **`backgroundColor`**: Use `className` and custom CSS for styling.
- **`borderColor`**: Use the `border` prop for styling.
- **`arrowColor`**: Available in V5.
- **`arrowRadius`**: Use `className` and custom CSS for styling.
- **`tooltipRadius`**: Use `className` and custom CSS for styling.
- **`insecure`**: Available in V5.
- **`className`**: Available in V5.
- **`id`**: Available in V5.
- **`html`**: Available in V5.
- **`delayHide`**: Available in V5. Also available on the anchor element as `data-delay-hide`.
- **`delayUpdate`**: Can be implemented if requested.
- **`delayShow`**: Available in V5. Also available on the anchor element as `data-delay-show`.
- **`event`**: Functionality changed and renamed to `openEvents`.
- **`eventOff`**: Functionality changed and renamed to `closeEvents`.
- **`isCapture`**: Available in V5.
- **`globalEventOff`**: Functionality changed and renamed to `globalCloseEvents`.
- **`getContent`**: Pass dynamic values to the `content` prop instead.
- **`afterShow`**: Available in V5.
- **`afterHide`**: Available in V5.
- **`overridePosition`**: Use the `position` prop.
- **`disable`**: Available in V5.
- **`scrollHide`**: Renamed to `closeOnScroll`.
- **`resizeHide`**: Renamed to `closeOnResize`.
- **`wrapper`**: Available in V5. Also available on the anchor element as `data-tooltip-wrapper`.
- **`bodyMode`**: Available in V5.
- **`clickable`**: Available in V5.
- **`disableInternalStyle`**: Renamed to `disableStyleInjection`.
```

--------------------------------

### Tooltip Component Props

Source: https://react-tooltip.com/docs/options

Configure tooltips using props passed to the Tooltip component.

```APIDOC
## Tooltip Component Props

### Description
Configure tooltips using props passed to the Tooltip component.

### Method
N/A (Client-side configuration)

### Endpoint
N/A

### Parameters
#### Path Parameters
None

#### Query Parameters
None

#### Request Body
None

### Request Example
```jsx
import { Tooltip } from 'react-tooltip';

<a id="my-anchor-element">◕‿‿◕</a>
<Tooltip
  anchorSelect="#my-anchor-element"
  content="Hello world!"
/>
```

### Response
#### Success Response (200)
N/A

#### Response Example
N/A

### Available Props
(Note: The provided text does not explicitly list the available props for the `Tooltip` component, only the data attributes for anchor elements. The example shows `anchorSelect` and `content` as props.)

- **`anchorSelect`** (string) - Required - Selector for the anchor element.
- **`content`** (string) - Optional - Content to be displayed in the tooltip.
```

--------------------------------

### Upgrade react-scripts

Source: https://react-tooltip.com/docs/troubleshooting

If you are using `react-scripts`, try upgrading to the latest version to resolve potential compatibility issues.

```bash
npm i react-scripts@latest
```

```bash
yarn add react-scripts@latest
```

--------------------------------

### Using renderToStaticMarkup for JSX Content

Source: https://react-tooltip.com/docs/examples/html

Employ `ReactDOMServer.renderToStaticMarkup()` to render JSX content within the tooltip via the `data-tooltip-html` attribute. This is useful for dynamic or complex content structures.

```javascript
import ReactDOMServer from 'react-dom/server';
[...] 
<a
  data-tooltip-id="my-tooltip"
  data-tooltip-html={ReactDOMServer.renderToStaticMarkup(<div>I am <b>JSX</b> content</div>)}
>
  ◕‿‿◕
</a>

```

--------------------------------

### Use TooltipWrapper for Global Tooltips

Source: https://react-tooltip.com/docs/examples/provider-wrapper

Wrap elements with TooltipWrapper to associate them with a Tooltip component placed anywhere within the provider.

```javascript
import { Tooltip, TooltipWrapper } from 'react-tooltip';  
  
<TooltipWrapper content="I am using a global tooltip!">  
  <a> ◕‿‿◕ </a>  
</TooltipWrapper>  
<TooltipWrapper content="This is the same tooltip!">  
  <a> ◕‿‿◕ </a>  
</TooltipWrapper>  
// the tooltip component can be placed anywhere inside the provider  
<Tooltip />
```

--------------------------------

### Configure Multiple Tooltips with IDs

Source: https://react-tooltip.com/docs/examples/provider-wrapper

Use the tooltipId prop on the wrapper and the id prop on the Tooltip component to manage multiple distinct tooltip instances.

```javascript
import { Tooltip, TooltipWrapper } from 'react-tooltip';  
  
<TooltipWrapper tooltipId="tooltip-1">  
  <a> ◕‿‿◕ </a>  
</TooltipWrapper>  
<TooltipWrapper tooltipId="tooltip-1">  
  <a> ◕‿‿◕ </a>  
</TooltipWrapper>  
<TooltipWrapper tooltipId="tooltip-2">  
  <a> ◕‿‿◕ </a>  
</TooltipWrapper>  
<TooltipWrapper tooltipId="tooltip-2">  
  <a> ◕‿‿◕ </a>  
</TooltipWrapper>  
<Tooltip id="tooltip-1" content="I am using tooltip-1" />  
<Tooltip id="tooltip-2" content="I am using tooltip-2" />
```

--------------------------------

### React Tooltip Props

Source: https://react-tooltip.com/docs/options

This section details the available props for the React Tooltip component, including their types, requirements, default values, and descriptions.

```APIDOC
## React Tooltip Component Props

### Description
This document outlines the various props that can be used to configure and customize the React Tooltip component.

### Props Table

| Prop Name | Type | Required | Default | Values | Description |
|---|---|---|---|---|---|
| `ref` | `React.useRef` | no | | `React.useRef` | Reference object which exposes internal state, and some methods for manually controlling the tooltip. |
| `className` | `string` | no | | | Class name to customize tooltip element. |
| `classNameArrow` | `string` | no | | | Class name to customize tooltip arrow element. |
| `content` | `string` | no | | | Content to be displayed in tooltip (`html` prop is priorized over `content`). |
| `render` | `function` | no | | | A function which receives a ref to the currently active anchor element and returns the content for the tooltip. |
| `place` | `string` | no | `top` | `top`, `top-start`, `top-end`, `right`, `right-start`, `right-end`, `bottom`, `bottom-start`, `bottom-end`, `left`, `left-start`, `left-end` | Position relative to the anchor element where the tooltip will be rendered. |
| `offset` | `number` | no | `10` | any `number` | Space between the tooltip element and anchor element. |
| `id` | `string` | no | | any `string` | The tooltip id. Must be set when using `data-tooltip-id` on the anchor element. |
| `anchorSelect` | CSS selector | no | | any valid CSS selector | The selector for the anchor elements. |
| `variant` | `string` | no | `dark` | `dark`, `light`, `success`, `warning`, `error`, `info` | Change the tooltip style with default presets. |
| `wrapper` | HTML tag | no | `div` | `div`, `span`, `p`, ... | Element wrapper for the tooltip container. |
| `children` | React node | no | `undefined` | valid React children | The tooltip children have lower priority compared to the `content` prop and the `data-tooltip-content` attribute. |
| `openOnClick` | `boolean` | no | `false` | `true`, `false` | When enabled, the tooltip will open on click instead of on hover. |
| `positionStrategy` | `string` | no | `absolute` | `absolute`, `fixed` | The position strategy used for the tooltip. |
| `delayShow` | `number` | no | | any `number` | The delay (in ms) before showing the tooltip. |
| `delayHide` | `number` | no | | any `number` | The delay (in ms) before hiding the tooltip. |
| `float` | `boolean` | no | `false` | `true`, `false` | Tooltip will follow the mouse position when it moves inside the anchor element. |
| `hidden` | `boolean` | no | `false` | `true`, `false` | Tooltip will not be shown. |
| `noArrow` | `boolean` | no | `false` | `true`, `false` | Tooltip arrow will not be shown. |
| `clickable` | `boolean` | no | `false` | `true`, `false` | Allow interaction with elements inside the tooltip. |
| `openEvents` | `Record<string, boolean>` | no | `mouseover`, `focus` | `mouseover`, `focus`, `mouseenter`, `click`, `dblclick`, `mousedown` | Events to be listened on the anchor elements to open the tooltip. |
| `closeEvents` | `Record<string, boolean>` | no | `mouseout`, `blur` | `mouseout`, `blur`, `mouseleave`, `click`, `dblclick`, `mouseup` | Events to be listened on the anchor elements to close the tooltip. |
| `globalCloseEvents` | `Record<string, boolean>` | no | | `escape`, `scroll`, `resize`, `clickOutsideAnchor` | Global events to be listened to close the tooltip. |
| `imperativeModeOnly` | `boolean` | no | `false` | `true`, `false` | When enabled, default tooltip behavior is disabled. |
| `style` | `CSSProperties` | no | | a CSS style object | Add inline styles directly to the tooltip. |

### Deprecated Props

- `html`: Use `children` or `render` instead.
- `anchorId`: Use `data-tooltip-id` or `anchorSelect` instead.
- `events`: Use `openOnClick` tooltip prop instead.
- `closeOnEsc`: Use `globalCloseEvents` instead.
- `closeOnScroll`: Use `globalCloseEvents` instead.
- `closeOnResize`: Use `globalCloseEvents` instead.
```

--------------------------------

### Create a client component wrapper for React Tooltip in Next.js

Source: https://react-tooltip.com/docs/troubleshooting

To use `react-tooltip` in Next.js 13 without tagging your component as a client component, create a wrapper file. This file should be named something other than `react-tooltip.tsx` to avoid editor and build conflicts.

```typescript
// src/components/ReactTooltip.tsx
'use client'

export { Tooltip } from 'react-tooltip'
```

--------------------------------

### Tooltip Variant API

Source: https://react-tooltip.com/docs/examples/variant

Demonstrates how to use the 'variant' prop to change the tooltip's color scheme.

```APIDOC
## Tooltip Variant

### Description

Default color stylings available for the ReactTooltip component. The `variant` prop allows you to choose from predefined color themes.

### Method

N/A (Component Prop)

### Endpoint

N/A (Component Prop)

### Parameters

#### Component Props

- **variant** (string) - Optional - Specifies the color variant of the tooltip. Can be one of `'dark' | 'light' | 'success' | 'warning' | 'error' | 'info'`.

### Request Example

```jsx
import { Tooltip } from 'react-tooltip';

<a
  data-tooltip-id="my-tooltip"
  data-tooltip-content="Hello world!"
  data-tooltip-variant="success"
>
  ◕‿‿◕
</a>
<Tooltip id="my-tooltip" />
```

### Response

N/A (Component Rendering)

#### Success Response (200)

N/A (Component Rendering)

#### Response Example

N/A (Component Rendering)
```

--------------------------------

### Attach Tooltip via Attribute Prefix

Source: https://react-tooltip.com/docs/examples/anchor-select

Use attribute selectors like [attr^='prefix'] to target elements based on attribute value patterns.

```javascript
import { Tooltip } from 'react-tooltip';  
  
<a name="my-anchor-element-1">◕‿‿◕</a>  
<a name="my-anchor-element-2">◕‿‿◕</a>  
<a name="my-anchor-element-3">◕‿‿◕</a>  
<a name="my-anchor-element-4">◕‿‿◕</a>  
<Tooltip  
  anchorSelect="[name^='my-anchor-element-']"  
  content="Hello world!"  
/>
```

--------------------------------

### Importing Tooltip as ReactTooltip

Source: https://react-tooltip.com/docs/upgrade-guide/changelog-v4-v5

If you have a `Tooltip` component in your application, you can explicitly declare this as `ReactTooltip` by using this import statement.

```javascript
import { Tooltip as ReactTooltip } from "react-tooltip"
```

--------------------------------

### React Tooltip with Dynamic Render Prop

Source: https://react-tooltip.com/docs/examples/render

Use the `render` prop to dynamically generate tooltip content. It provides access to the `content` attribute and the `activeAnchor` element, allowing for context-aware tooltips.

```javascript
import { Tooltip } from 'react-tooltip';

<a
  data-tooltip-id="my-tooltip"
  data-tooltip-content="1"
  data-some-relevant-attr="wow"
>
  ◕‿‿◕
</a>
<a
  data-tooltip-id="my-tooltip"
  data-tooltip-content="2"
  data-some-relevant-attr="so relevant"
>
  ◕‿‿◕
</a>
<a
  data-tooltip-id="my-tooltip"
  data-tooltip-content="3"
  data-some-relevant-attr="much important"
>
  ◕‿‿◕
</a>
<Tooltip
  id="my-tooltip"
  render={({ content, activeAnchor }) => (
    <span>
      The element #{content} is currently active.
      <br/>
      Relevant attribute: {activeAnchor?.getAttribute('data-some-relevant-attr') || 'not set'}
    </span>
  )}
/>
```

--------------------------------

### Implement controlled tooltip state

Source: https://react-tooltip.com/docs/examples/state

Use the isOpen prop to manually control tooltip visibility. This approach is intended for complex scenarios where default behavior is insufficient.

```jsx
import { useState } from 'react';  
import { Tooltip } from 'react-tooltip';  
  
const [isOpen, setIsOpen] = useState(false)  
  
<a data-tooltip-id="my-tooltip" onMouseEnter={() => setIsOpen(true)}>  
  ◕‿‿◕  
</a>  
<a data-tooltip-id="my-tooltip" onMouseEnter={() => setIsOpen(true)}>  
  ◕‿‿◕  
</a>  
<a data-tooltip-id="my-tooltip" onMouseEnter={() => setIsOpen(true)}>  
  ◕‿‿◕  
</a>  
<a data-tooltip-id="my-tooltip" onMouseEnter={() => setIsOpen(true)}>  
  ◕‿‿◕  
</a>  
<a data-tooltip-id="my-tooltip" onMouseEnter={() => setIsOpen(true)}>  
  ◕‿‿◕  
</a>  
<a  
  data-tooltip-id="my-tooltip"  
  data-tooltip-content="Click me!"  
  onMouseEnter={() => setIsOpen(true)}  
  onClick={() => setIsOpen(false)}  
>  
  ◕‿‿◕  
</a>  
<Tooltip  
  id="my-tooltip"  
  content="Hello world!"  
  isOpen={isOpen}  
/>
```

--------------------------------

### Use data attributes for tooltips

Source: https://react-tooltip.com/docs/getting-started

Apply tooltips to elements using data attributes like `data-tooltip-id`, `data-tooltip-content`, and `data-tooltip-place`. Ensure a corresponding `<Tooltip />` element with a matching `id` is rendered.

```html
<a  
  data-tooltip-id="my-tooltip"  
  data-tooltip-content="Hello world!"  
  data-tooltip-place="top"  
>
  ◕‿‿◕  
</a>  
<a data-tooltip-id="my-tooltip" data-tooltip-content="Hello to you too!">
  ◕‿‿◕  
</a>  

```

--------------------------------

### Tooltip with Props Configuration

Source: https://react-tooltip.com/docs/options

Configure a tooltip using props on the Tooltip component, linking it to an anchor element via `anchorSelect`. The `content` prop sets the tooltip's text.

```jsx
import { Tooltip } from 'react-tooltip';

<a id="my-anchor-element">◕‿‿◕</a>
<Tooltip
  anchorSelect="#my-anchor-element"
  content="Hello world!"
/>

```

--------------------------------

### Configure hover event for ReactTooltip

Source: https://react-tooltip.com/docs/examples/events

The hover event is the default behavior and does not require explicit configuration.

```javascript
import { Tooltip } from 'react-tooltip';  
  
<a data-tooltip-id="my-tooltip"> ◕‿‿◕ </a>  
<Tooltip  
  id="my-tooltip"  
  content="Hello world!"  
  events={['hover']}  
/>  
```

--------------------------------

### Apply Custom Pink Styling

Source: https://react-tooltip.com/docs/examples/styling

Uses a custom CSS class to change the background and text color of the tooltip.

```jsx
import { Tooltip } from 'react-tooltip'  
  
<style>  
.example-container .example-pink {  
  color: #fff;  
  background-color: rgb(255, 0, 255);  
}  
</style>  
  
<div className="example-container">  
  <a data-tooltip-id="my-tooltip-pink" data-tooltip-content="Hello world!">  
    ◕‿‿◕  
  </a>  
  <Tooltip id="my-tooltip-pink" className="example-pink" />  
</div>
```

--------------------------------

### Using html Prop for HTML Content

Source: https://react-tooltip.com/docs/examples/html

The `html` prop allows direct rendering of HTML strings. Be cautious as this can be a security risk if the HTML is user-supplied; sanitization is recommended. Consider passing content as children instead.

```javascript
import { Tooltip } from 'react-tooltip';

<a data-tooltip-id="my-tooltip-html-prop">◕‿‿◕</a>
<Tooltip
  id="my-tooltip-html-prop"
  html="Hello<br /><s>multiline</s><br /><b>HTML</b><br />tooltip"
/>

```

--------------------------------

### Configure click event for ReactTooltip

Source: https://react-tooltip.com/docs/examples/events

The tooltip opens on click and closes when clicking outside the anchor element.

```javascript
import { Tooltip } from 'react-tooltip';  
  
<a data-tooltip-id="my-tooltip-click"> ◕‿‿◕ </a>  
<Tooltip  
  id="my-tooltip-click"  
  content="Hello world!"  
  events={['click']}  
/>  
```

--------------------------------

### Apply patch for react-tooltip issue #1067

Source: https://react-tooltip.com/docs/troubleshooting

This patch can be used to resolve an issue where the tooltip component is undefined, potentially related to create-react-app not supporting `.cjs` files. It's recommended to use `patch-package` or the CRA issue #12700 solution for a more permanent fix.

```bash
# if you're on Windows, just download the `.patch` file manually
wget https://github.com/ReactTooltip/react-tooltip/files/12195501/react-tooltip-1067.patch
git diff react-tooltip-1067.patch
```

--------------------------------

### React-Tooltip Component Props

Source: https://react-tooltip.com/docs/options

Configuration properties for the React-Tooltip component to manage behavior, appearance, and accessibility.

```APIDOC
## React-Tooltip Component Props

### Description
Configuration properties for the React-Tooltip component.

### Parameters
- **position** ({ x: number; y: number }) - Optional - Override the tooltip position on the DOM.
- **isOpen** (boolean) - Optional - Controlled visibility state.
- **defaultIsOpen** (boolean) - Optional - Initial visibility state (default: false).
- **setIsOpen** (function) - Optional - Callback to handle show/hide state.
- **afterShow** (function) - Optional - Callback executed after the tooltip is shown.
- **afterHide** (function) - Optional - Callback executed after the tooltip is hidden.
- **disableTooltip** (function) - Optional - Function returning boolean to hide tooltip for specific anchor elements.
- **middlewares** (Middleware[]) - Optional - Array of floating-ui middlewares for advanced customization.
- **border** (CSS border) - Optional - CSS border style for the tooltip and arrow.
- **opacity** (CSS opacity) - Optional - Opacity value (default: 0.9).
- **arrowColor** (CSS color) - Optional - Background color for the tooltip arrow.
- **arrowSize** (number) - Optional - Size of the tooltip arrow (default: 8).
- **disableStyleInjection** (boolean or 'core') - Optional - Disables automatic style injection (default: false).
- **role** (React.AriaRole) - Optional - ARIA role, either 'tooltip' or 'dialog' (default: 'tooltip').
```

--------------------------------

### React Tooltip Imperative API Definitions

Source: https://react-tooltip.com/docs/examples/imperative-mode

Defines the interfaces for imperative tooltip options and ref properties, including methods for opening and closing, and read-only properties for internal state.

```typescript
interface TooltipImperativeOpenOptions {
  anchorSelect?: string
  position?: IPosition
  place?: PlacesType
  /**
   * In practice, `ChildrenType` -> `React.ReactNode`
   */
  content?: ChildrenType
  /**
   * Delay (in ms) before opening the tooltip.
   */
  delay?: number
}

interface TooltipImperativeCloseOptions {
  /**
   * Delay (in ms) before closing the tooltip.
   */
  delay?: number
}

interface TooltipRefProps {
  open: (options?: TooltipImperativeOpenOptions) => void
  close: (options?: TooltipImperativeCloseOptions) => void
  /**
   * @readonly
   */
  activeAnchor: HTMLElement | null
  /**
   * @readonly
   */
  place: PlacesType
  /**
   * @readonly
   */
  isOpen: boolean

}
```

--------------------------------

### Create anchor elements for Tooltip

Source: https://react-tooltip.com/docs/getting-started

Define anchor elements that will trigger the tooltip. These elements can be styled or selected using CSS.

```html
<a className="my-anchor-element">◕‿‿◕</a>  
<a className="my-anchor-element">◕‿‿◕</a>  
<a className="my-anchor-element">◕‿‿◕</a>  

```

--------------------------------

### Adjust Tooltip Opacity

Source: https://react-tooltip.com/docs/examples/styling

Sets opacity using the opacity prop or the --rt-opacity CSS variable.

```jsx
import { Tooltip } from 'react-tooltip'  
  
<div className="example-container">  
  <a data-tooltip-id="my-tooltip-opacity" data-tooltip-content="Hello world!">  
    ◕‿‿◕  
  </a>  
  <Tooltip id="my-tooltip-opacity" opacity={0.3} />  
</div>
```

```css
/* To be used instead of the `opacity` prop, not required otherwise */  
:root {  
  --rt-opacity: 0.3;  
}
```

--------------------------------

### Configure Webpack for ESM

Source: https://react-tooltip.com/docs/troubleshooting

Add a rule to webpack.config.js to handle .mjs files if encountering import errors.

```javascript
module.exports = {  
  ...  
  module: {  
    rules: [  
      {  
        test: /\.mjs$/,
        include: /node_modules/,
        type: 'javascript/auto',
      }  
    ]  
  }  
}
```

--------------------------------

### Render Tooltip component with ID

Source: https://react-tooltip.com/docs/getting-started

Render the Tooltip component and associate it with anchor elements using the `id` prop that matches the `data-tooltip-id` attribute.

```html
<Tooltip id="my-tooltip" />  

```

--------------------------------

### ReactTooltip with Data Attributes

Source: https://react-tooltip.com/docs/examples/basic-examples

Use data attributes to define tooltip content and associate it with anchor elements. Ensure the Tooltip component is rendered with a matching ID.

```javascript
import { Tooltip } from 'react-tooltip';  
  
<a data-tooltip-id="my-tooltip" data-tooltip-content="Hello world!">  
  ◕‿‿◕  
</a>  
<a data-tooltip-id="my-tooltip" data-tooltip-content="Hello to you too!">  
  ◕‿‿◕  
</a>  
<Tooltip id="my-tooltip" />  


```

--------------------------------

### Use anchorSelect prop for Tooltip

Source: https://react-tooltip.com/docs/getting-started

Configure the Tooltip component to select anchor elements using a CSS selector provided to the `anchorSelect` prop. The content of the tooltip will be applied to all matching elements.

```html
<Tooltip anchorSelect=".my-anchor-element" place="top">  
  Hello world!  
</Tooltip>  

```

--------------------------------

### Set ReactTooltip Content with content Prop

Source: https://react-tooltip.com/docs/examples/content

Alternatively, use the `content` prop directly on the `Tooltip` component, referencing the anchor element via `anchorSelect`. This method is useful for dynamic content.

```javascript
import { Tooltip } from 'react-tooltip';  
  
<a id="my-anchor-element">◕‿‿◕</a>  
<Tooltip  
  anchorSelect="#my-anchor-element"  
  content="Hello world!"  
/>  

```

--------------------------------

### Tooltip Internal State

Source: https://react-tooltip.com/docs/examples/imperative-mode

Read-only properties available on the Tooltip ref to inspect current state.

```APIDOC
## Tooltip Internal State Properties

### Properties
- **activeAnchor** (HTMLElement | null) - Read-only - Reference to the current anchor element.
- **place** (PlacesType) - Read-only - The current tooltip placement.
- **isOpen** (boolean) - Read-only - Indicates whether the tooltip is currently visible.
```

--------------------------------

### Render multiline content with data-tooltip-html

Source: https://react-tooltip.com/docs/examples/multiline

Use the data-tooltip-html attribute to inject HTML strings directly into the tooltip. Ensure the content is properly escaped if coming from user input.

```javascript
import { Tooltip } from 'react-tooltip';  
  
<a  
  data-tooltip-id="my-tooltip-multiline"  
  data-tooltip-html="Hello<br />some stuff in between<br />world!"  
>  
  ◕‿‿◕  
</a>  
<Tooltip id="my-tooltip-multiline" />
```

--------------------------------

### Inline Styling for Tooltip

Source: https://react-tooltip.com/docs/examples/styling

Apply styles directly to the Tooltip component using the 'style' prop for quick customizations. Ensure the 'id' prop matches the target element.

```javascript
import { Tooltip } from 'react-tooltip'  
  
<a  
  data-tooltip-id="my-tooltip-inline"  
  data-tooltip-content="Hello world!"
>
  ◕‿‿◕  
</a>  
<Tooltip  
  id="my-tooltip-inline"  
  style={{ backgroundColor: "rgb(0, 255, 30)", color: "#222" }}
/>  


```

--------------------------------

### ReactTooltip Render Prop

Source: https://react-tooltip.com/docs/examples/render

The render prop allows developers to customize tooltip content dynamically using the active anchor element and its attributes.

```APIDOC
## Render Prop API

### Description
The `render` prop enables dynamic tooltip content generation. It accepts a function that receives the current content and the active anchor element reference.

### Parameters
- **render** (function) - Required - A function with signature: `(render: { content: string | null; activeAnchor: HTMLElement | null }) => React.ReactNode`

### Properties
- **content** (string | null) - The value of the `data-tooltip-content` attribute on the active anchor.
- **activeAnchor** (HTMLElement | null) - A reference to the currently active anchor element.

### Usage Example
```jsx
<Tooltip
  id="my-tooltip"
  render={({ content, activeAnchor }) => (
    <span>
      The element #{content} is currently active.
      <br/>
      Relevant attribute: {activeAnchor?.getAttribute('data-some-relevant-attr') || 'not set'}
    </span>
  )}
/>
```
```

--------------------------------

### Set Tooltip Border

Source: https://react-tooltip.com/docs/troubleshooting

Use the border prop instead of CSS to correctly style the tooltip arrow.

```jsx
<Tooltip border="1px solid red" />
```

--------------------------------

### Data Attributes for Anchor Elements

Source: https://react-tooltip.com/docs/options

Configure tooltips directly on anchor elements using data attributes.

```APIDOC
## Data Attributes for Anchor Elements

### Description
Configure tooltips directly on anchor elements using data attributes.

### Method
N/A (Client-side configuration)

### Endpoint
N/A

### Parameters
#### Path Parameters
None

#### Query Parameters
None

#### Request Body
None

### Request Example
```jsx
import { Tooltip } from 'react-tooltip';

<a
  data-tooltip-id="my-tooltip"
  data-tooltip-content="Hello world!"
>
  ◕‿‿◕
</a>
<Tooltip id="my-tooltip" />
```

### Response
#### Success Response (200)
N/A

#### Response Example
N/A

### Available Attributes
| Name | Type | Required | Default | Values | Description |
|---|---|---|---|---|---|
| `data-tooltip-id` | string | false | | | The id set on the tooltip element (same as V4's `data-for`) |
| `data-tooltip-content` | string | false | | | Content to be displayed in the tooltip (`html` is priorized over `content`) |
| `data-tooltip-html` | string | false | | | HTML content to be displayed in tooltip |
| `data-tooltip-place` | string | false | `top` | `top` `top-start` `top-end` `right` `right-start` `right-end` `bottom` `bottom-start` `bottom-end` `left` `left-start` `left-end` | Position relative to the anchor element where the tooltip will be rendered (if possible) |
| `data-tooltip-offset` | number | false | `10` | any `number` | Space between the tooltip element and anchor element (arrow not included in the calculation) |
| `data-tooltip-variant` | string | false | `dark` | `dark` `light` `success` `warning` `error` `info` | Change the tooltip style with default presets |
| `data-tooltip-wrapper` | string | false | `div` | `div` `span` `p` | Element wrapper for the tooltip container, can be `div`, `span`, `p` or any valid HTML tag |
| `data-tooltip-position-strategy` | string | false | `absolute` | `absolute` `fixed` | The position strategy used for the tooltip. Set to `fixed` if you run into issues with `overflow: hidden` on the tooltip parent container |
| `data-tooltip-delay-show` | number | false | | any `number` | The delay (in ms) before showing the tooltip |
| `data-tooltip-delay-hide` | number | false | | any `number` | The delay (in ms) before hiding the tooltip |
| `data-tooltip-float` | boolean | false | `false` | `true` `false` | Tooltip will follow the mouse position when it moves inside the anchor element (same as V4's `effect="float"`) |
| `data-tooltip-hidden` | boolean | false | `false` | `true` `false` | Tooltip will not be shown |
| `data-tooltip-class-name` | string | false | | | Classnames for the tooltip container |

**DEPRECATED**
~~`data-tooltip-events`~~ | ~~string~~ | ~~false~~ | ~~`hover`~~ | ~~`hover click``hover` `click`~~ | ~~Events to watch for when handling the tooltip state~~
Use `openOnClick` tooltip prop instead
```

--------------------------------

### Customize Tooltip Arrow Color

Source: https://react-tooltip.com/docs/examples/styling

Demonstrates using the arrowColor prop or custom CSS classes to style the tooltip arrow.

```jsx
<Tooltip arrowColor="red" />
```

```jsx
import { Tooltip } from 'react-tooltip'  
  
<style>  
.example-container .example-diff-arrow {  
  color: #fff;  
  background-color: rgb(55, 55, 55);  
}  
  
.example-container .example-diff-arrow .example-arrow {  
  background-color: rgb(222, 34, 72);  
}  
</style>  
  
<div className="example-container">  
  <a data-tooltip-id="my-tooltip-diff" data-tooltip-content="Hello world!">  
    ◕‿‿◕  
  </a>  
  <Tooltip id="my-tooltip-diff" className="example-diff-arrow" classNameArrow="example-arrow" />  
</div>
```
Tokens:
Raw