### Basic Usage of portalRoot

Source: https://github.com/reacttooltip/react-tooltip/blob/master/docs/docs/examples/portal-root.mdx

This example shows the fundamental setup for using `portalRoot`. It involves creating a ref for the desired portal container, updating the `portalRoot` state with the ref's current value, and then passing this state to the `Tooltip` component. `positionStrategy="fixed"` is recommended for external rendering.

```jsx
import React, { useEffect, useRef, useState } from 'react'
import { Tooltip } from 'react-tooltip'

function Example() {
  const portalContainerRef = useRef(null)
  const [portalRoot, setPortalRoot] = useState(null)

  useEffect(() => {
    setPortalRoot(portalContainerRef.current)
  }, [])

  return (
    <>
      <button data-tooltip-id="my-tooltip">Hover me</button>
      <div ref={portalContainerRef} />
      <Tooltip
        id="my-tooltip"
        content="Rendered through portalRoot"
        portalRoot={portalRoot}
        positionStrategy="fixed"
      />
    </>
  )
}
```

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

### Start Local Development Server

Source: https://github.com/reacttooltip/react-tooltip/blob/master/docs/README.md

Starts a local development server and opens a browser window. Changes are reflected live without restarting.

```bash
$ yarn start
```

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

### Install Dependencies

Source: https://github.com/reacttooltip/react-tooltip/blob/master/docs/README.md

Run this command to install project dependencies using Yarn.

```bash
$ yarn
```

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

### Install react-tooltip with npm

Source: https://github.com/reacttooltip/react-tooltip/blob/master/README.md

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

```sh
npm install react-tooltip
```

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

### Install react-tooltip with yarn

Source: https://github.com/reacttooltip/react-tooltip/blob/master/README.md

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

```sh
yarn add react-tooltip
```

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

### Install Latest ReactTooltip

Source: https://github.com/reacttooltip/react-tooltip/blob/master/docs/docs/troubleshooting.mdx

Ensure you are using the latest version of ReactTooltip by running the appropriate installation command for your package manager.

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

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

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

### Controlled Tooltip State Example

Source: https://github.com/reacttooltip/react-tooltip/blob/master/docs/docs/examples/state.mdx

Use this pattern when you need to manually control when a tooltip opens or closes. The example demonstrates opening tooltips on hover and closing the last one on click.

```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}
/>
```

```jsx
export const ControlledStateExample = () => {
  const [isOpen, setIsOpen] = useState(false)
  return (
    <>
      <TooltipAnchor data-tooltip-id="my-tooltip" onMouseEnter={() => setIsOpen(true)}>
        ◕‿‿◕
      </TooltipAnchor>
      <TooltipAnchor data-tooltip-id="my-tooltip" onMouseEnter={() => setIsOpen(true)}>
        ◕‿‿◕
      </TooltipAnchor>
      <TooltipAnchor data-tooltip-id="my-tooltip" onMouseEnter={() => setIsOpen(true)}>
        ◕‿‿◕
      </TooltipAnchor>
      <TooltipAnchor data-tooltip-id="my-tooltip" onMouseEnter={() => setIsOpen(true)}>
        ◕‿‿◕
      </TooltipAnchor>
      <TooltipAnchor data-tooltip-id="my-tooltip" onMouseEnter={() => setIsOpen(true)}>
        ◕‿‿◕
      </TooltipAnchor>
      <TooltipAnchor
        background="lightgray"
        data-tooltip-id="my-tooltip"
        data-tooltip-content="Click me!"
        onMouseEnter={() => setIsOpen(true)}
        onClick={() => setIsOpen(false)}
      >
        ◕‿‿◕
      </TooltipAnchor>
      <Tooltip id="my-tooltip" content="Hello world!" isOpen={isOpen} />
    </>
  )
}
```

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

### Update React Tooltip with npm

Source: https://github.com/reacttooltip/react-tooltip/blob/master/README.md

Use this command to install the latest version of React Tooltip using npm.

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

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

### Update React Tooltip with yarn

Source: https://github.com/reacttooltip/react-tooltip/blob/master/README.md

Use this command to install the latest version of React Tooltip using yarn.

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

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

### Optimize Performance: Single Tooltip Component (Bad Example)

Source: https://github.com/reacttooltip/react-tooltip/blob/master/docs/docs/troubleshooting.mdx

Avoid creating a separate `<Tooltip />` component for each dynamically generated item. This approach can lead to performance issues.

```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>
```

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

### V5 Tooltip Usage with Props

Source: https://github.com/reacttooltip/react-tooltip/blob/master/docs/docs/upgrade-guide/basic-examples-v4-v5.mdx

Example of using react-tooltip in V5 with `anchorSelect` and `content` props for a more declarative approach.

```jsx
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!" />
```

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

### V4 Tooltip Usage

Source: https://github.com/reacttooltip/react-tooltip/blob/master/docs/docs/upgrade-guide/basic-examples-v4-v5.mdx

Example of using react-tooltip in V4 or earlier versions with `data-tip` and `data-for` attributes.

```jsx
import ReactTooltip from 'react-tooltip';

<a
  data-tip="Hello world!"
  data-for="tooltip"
>
  ◕‿‿◕
</a>
<ReactTooltip id="tooltip" place="top" />
```

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

### Optimize Performance: Single Tooltip Component (Good Example)

Source: https://github.com/reacttooltip/react-tooltip/blob/master/docs/docs/troubleshooting.mdx

Improve performance by using a single, shared `<Tooltip />` component for all dynamically generated items. Assign a common `data-tooltip-id` and use `data-tooltip-content` on the anchor elements.

```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" />
```

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

### V5 Tooltip Usage with Data Attributes

Source: https://github.com/reacttooltip/react-tooltip/blob/master/docs/docs/upgrade-guide/basic-examples-v4-v5.mdx

Example of using react-tooltip in V5 with the new `data-tooltip-id` and `data-tooltip-content` attributes.

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

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

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

### Basic Tooltip Styling with CSS Variables

Source: https://github.com/reacttooltip/react-tooltip/blob/master/docs/docs/getting-started.mdx

Customize the appearance of your tooltips by overriding default CSS variables. For more advanced styling, refer to the styling examples.

```css
:root {
  --rt-color-white: #fff;
  --rt-color-dark: #222;
  --rt-color-success: #8dc572;
  --rt-color-error: #be6464;
  --rt-color-warning: #f0ad4e;
  --rt-color-info: #337ab7;
  --rt-opacity: 0.9;
  --rt-transition-show-delay: 0.15s;
  --rt-transition-closing-delay: 0.15s;
}
```

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

### Multiple Tooltip Variants Example

Source: https://github.com/reacttooltip/react-tooltip/blob/master/docs/docs/examples/variant.mdx

Showcase various tooltip variants ('success', 'error', 'warning', 'info', 'dark', 'light') by applying different `data-tooltip-variant` attributes to multiple anchor elements. All anchors share the same tooltip ID.

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

<div style={{ display: 'flex', columnGap: '16px', justifyContent: 'center' }}>
  <TooltipAnchor
    data-tooltip-id="my-tooltip"
    data-tooltip-content="Success tooltip variant"
    data-tooltip-variant="success"
  >
    ◕‿‿◕
  </TooltipAnchor>
  <TooltipAnchor
    data-tooltip-id="my-tooltip"
    data-tooltip-content="Error tooltip variant"
    data-tooltip-variant="error"
  >
    ◕‿‿◕
  </TooltipAnchor>
  <TooltipAnchor
    data-tooltip-id="my-tooltip"
    data-tooltip-content="Warning tooltip variant"
    data-tooltip-variant="warning"
  >
    ◕‿‿◕
  </TooltipAnchor>
  <TooltipAnchor
    data-tooltip-id="my-tooltip"
    data-tooltip-content="Info tooltip variant"
    data-tooltip-variant="info"
  >
    ◕‿‿◕
  </TooltipAnchor>
  <TooltipAnchor
    data-tooltip-id="my-tooltip"
    data-tooltip-content="Dark tooltip variant"
    data-tooltip-variant="dark"
  >
    ◕‿‿◕
  </TooltipAnchor>
  <TooltipAnchor
    data-tooltip-id="my-tooltip"
    data-tooltip-content="Light tooltip variant"
    data-tooltip-variant="light"
  >
    ◕‿‿◕
  </TooltipAnchor>
  <Tooltip id="my-tooltip" />
</div>
```

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

### Imperative Mode Only Example

Source: https://github.com/reacttooltip/react-tooltip/blob/master/docs/docs/examples/imperative-mode.mdx

To disable default tooltip behavior (like closing on unhovering the anchor) when using imperative methods exclusively, set the `imperativeModeOnly` prop to `true` on the Tooltip component. This example demonstrates opening and closing tooltips with specific positions and content.

```jsx
export const ImperativeModeExample = () => {
  const tooltipRef1 = useRef(null)
  const tooltipRef2 = useRef(null)
  return (
    <>
      <TooltipAnchor id="my-element">
        ◕‿‿◕
      </TooltipAnchor>
      <div style={{ display: 'flex', flexDirection: 'row', gap: '5px' }}>
        <button 
          onClick={() => {
            tooltipRef1.current?.open({
              anchorSelect: '#my-element',
              content: 'Hello world!',
            })
            tooltipRef2.current?.open({
              position: {
                x: 300 + Math.random() * 500,
                y: 300 + Math.random() * 300,
              },
              place: 'bottom',
              content: 'Where am I? 😕😕',
            })
          }}
        >
          Open
        </button>
        <button 
          onClick={() => {
            tooltipRef1.current?.close()
            tooltipRef2.current?.close()
          }}
        >
          Close
        </button>
      </div>
      <Tooltip ref={tooltipRef1} />
      <Tooltip ref={tooltipRef2} />
    </>
  )
}

<div style={{ display: 'flex', flexDirection: 'column', gap: '10px', width: 'fit-content', margin: 'auto' }}>
  <ImperativeModeExample />
</div>
```

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

### Basic Usage: Anchor Select by Class

Source: https://github.com/reacttooltip/react-tooltip/blob/master/docs/docs/examples/anchor-select.mdx

Use the `anchorSelect` prop with a CSS selector starting with '.' to target elements by their class name. This will attach the tooltip to all elements with the specified class.

```jsx
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!"
/>
```

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

### Render Tooltip into Custom DOM Container

Source: https://github.com/reacttooltip/react-tooltip/blob/master/docs/docs/examples/portal-root.mdx

Use the `portalRoot` prop to specify a DOM element for rendering the tooltip. This example demonstrates rendering a tooltip into a designated container, escaping the clipping of a parent panel. `positionStrategy="fixed"` is used for reliable positioning when rendering outside the normal DOM flow.

```jsx
import React, { useEffect, useRef, useState } from 'react'
import { Tooltip } from 'react-tooltip'

export const TooltipAnchor = ({ children, id, ...rest }) => {
  return (
    <span
      id={id}
      style={{
        display: 'flex',
        justifyContent: 'center',
        alignItems: 'center',
        width: '60px',
        height: '60px',
        borderRadius: '60px',
        color: '#222',
        background: 'rgba(255, 255, 255, 1)',
        cursor: 'pointer',
        boxShadow: '3px 4px 3px rgba(0, 0, 0, 0.5)',
        border: '1px solid #333',
      }}
      {...rest}
    >
      {children}
    </span>
  )
}

export const PortalRootExample = () => {
  const portalContainerRef = useRef(null)
  const [portalRoot, setPortalRoot] = useState(null)

  useEffect(() => {
    setPortalRoot(portalContainerRef.current)
  }, [])

  return (
    <div
      style={{
        display: 'grid',
        gap: '1rem',
        justifyItems: 'center',
      }}
    >
      <div
        style={{
          width: '100%',
          maxWidth: '580px',
          overflow: 'hidden',
          border: '1px solid #cbd5e1',
          borderRadius: '16px',
          padding: '1.25rem',
          background',
          'linear-gradient(180deg, rgba(248,250,252,1) 0%, rgba(241,245,249,1) 100%)',
        }}
      >
        <p style={{ margin: 0, textAlign: 'center', color: '#475569' }}>
          This panel clips its content. The tooltip is rendered into the container below instead of
          staying inside this box.
        </p>
        <div
          style={{
            display: 'flex',
            justifyContent: 'center',
            paddingTop: '1rem',
          }}
        >
          <TooltipAnchor data-tooltip-id="my-tooltip-portal-root">◕‿‿◕</TooltipAnchor>
        </div>
      </div>

      <div
        ref={portalContainerRef}
        style={{
          width: '100%',
          maxWidth: '580px',
          minHeight: '96px',
          border: '1px dashed #0f766e',
          borderRadius: '16px',
          padding: '1rem',
          background: 'rgba(240, 253, 250, 1)',
          position: 'relative',
        }}
      >
        <p style={{ margin: 0, textAlign: 'center', color: '#115e59' }}>
          Tooltip portal container
        </p>
      </div>

      <Tooltip
        id="my-tooltip-portal-root"
        content="Rendered through portalRoot"
        portalRoot={portalRoot}
        positionStrategy="fixed"
      />
    </div>
  )
}
```

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

### Open and Close Tooltips Imperatively

Source: https://github.com/reacttooltip/react-tooltip/blob/master/docs/docs/examples/imperative-mode.mdx

Use `useRef` to get a reference to the Tooltip component and call its `open` and `close` methods. The `open` method accepts an object with `anchorSelect` or `position` and `content` properties. The `close` method can be called without arguments.

```jsx
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} />
```

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

### Render Multiline JSX Content in Tooltip

Source: https://github.com/reacttooltip/react-tooltip/blob/master/docs/docs/upgrade-guide/changelog-v5-v6.md

For multiline tooltips previously using HTML strings, render JSX directly as children of the `Tooltip` component. This example demonstrates styling a flex container to arrange multiline text vertically.

```jsx
<Tooltip id="my-tooltip">
  <div style={{ display: 'flex', flexDirection: 'column' }}>
    <span>Hello</span>
    <span>some stuff in between</span>
    <span>world!</span>
  </div>
</Tooltip>
```

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

### Complex Selectors: Attribute Prefix

Source: https://github.com/reacttooltip/react-tooltip/blob/master/docs/docs/examples/anchor-select.mdx

Utilize attribute selectors like `[attr^='prefix']` to target elements whose attribute values start with a specific prefix. This example uses the 'name' attribute.

```jsx
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!"
/>
```

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

### Build Static Content

Source: https://github.com/reacttooltip/react-tooltip/blob/master/docs/README.md

Generates static content into the 'build' directory, ready to be served by any static hosting service.

```bash
$ yarn build
```

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

### Deploy Website using SSH

Source: https://github.com/reacttooltip/react-tooltip/blob/master/docs/README.md

Deploys the website using SSH. Ensure the USE_SSH environment variable is set.

```bash
$ USE_SSH=true yarn deploy
```

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

### Run Single Benchmark Pass

Source: https://github.com/reacttooltip/react-tooltip/blob/master/benchmarks/README.md

Execute a single benchmark pass with default settings. This runs 5 repeats for each tooltip count.

```bash
node benchmarks/run-benchmark.mjs
```

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

### Deploy Website without SSH

Source: https://github.com/reacttooltip/react-tooltip/blob/master/docs/README.md

Deploys the website without using SSH. Provide your GitHub username for the GIT_USER environment variable.

```bash
$ GIT_USER=<Your GitHub username> yarn deploy
```

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

### Using data-tooltip-place Attribute for Tooltip Placement

Source: https://github.com/reacttooltip/react-tooltip/blob/master/docs/docs/examples/place.mdx

Demonstrates how to set tooltip placement using the `data-tooltip-place` attribute. This approach is useful for applying various placements to a single anchor element.

```jsx
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}
  />
))}
```

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

### Dynamic Tooltip Placement with place Prop

Source: https://github.com/reacttooltip/react-tooltip/blob/master/docs/docs/examples/place.mdx

Shows how to dynamically change the tooltip's placement using the `place` prop and React's `useState` hook. The placement cycles through all available options on click.

```jsx
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]}
/>
```

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

### Basic Usage: Anchor Select by ID

Source: https://github.com/reacttooltip/react-tooltip/blob/master/docs/docs/examples/anchor-select.mdx

Use the `anchorSelect` prop with a CSS selector starting with '#' to target an element by its ID. Ensure the ID in the selector matches the element's ID.

```jsx
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!"
/>
```

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

### Update Local Dependencies in Docs

Source: https://github.com/reacttooltip/react-tooltip/blob/master/CONTRIBUTING.md

Modify the 'dependencies' section in the docs/package.json file to link to local React and ReactDOM packages and the local react-tooltip build. This ensures the documentation site runs with your local development version.

```json
"react": "18.3.1",
"react-dom": "18.3.1",
"react-tooltip": "6.0.1"
```

```json
"react": "link:../node_modules/react",
"react-dom": "link:../node_modules/react-dom",
"react-tooltip": "link:.."
```

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

### Using Render Prop for Dynamic HTML Content

Source: https://github.com/reacttooltip/react-tooltip/blob/master/docs/docs/examples/html.mdx

Utilize the `render` prop to dynamically generate rich HTML content for tooltips. This is ideal for content that needs to be generated on the fly.

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

<a data-tooltip-id="my-tooltip-render">◕‿‿◕</a>
<Tooltip
  id="my-tooltip-render"
  render={() => (
    <div>
      Hello
      <br />
      <s>multiline</s>
      <br />
      <b>markup</b>
      <br />
      tooltip
    </div>
  )}
/>
```

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

### CSS Specificity for Tooltip Arrow

Source: https://github.com/reacttooltip/react-tooltip/blob/master/docs/docs/examples/styling.mdx

To change the tooltip arrow's background color independently, you need to target the arrow element with increased CSS specificity. This example shows how to style the arrow when using custom classes.

```css
.some-class-or-rule .example {
  color: #222;
  background-color: rgb(0, 247, 255);
}

/** Add next line only if you want to have a tooltip arrow with a different background color from the tooltip **/
.some-class-or-rule .example .example-arrow {
  background-color: rgb(255, 0, 0);
}
```

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

### Import Tooltip component with V4 alias

Source: https://github.com/reacttooltip/react-tooltip/blob/master/README.md

Import the Tooltip component and alias it as ReactTooltip, similar to how it was used in V4.

```js
import { Tooltip as ReactTooltip } from 'react-tooltip'
```

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

### Apply patch for undefined tooltip component

Source: https://github.com/reacttooltip/react-tooltip/blob/master/docs/docs/troubleshooting.mdx

This command downloads and applies a patch file to fix an issue where the tooltip component might be undefined, often related to `.cjs` file handling in create-react-app. Note that this patch may need to be reapplied after dependency updates.

```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
```

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

### Render Tooltip Instance Near App Root

Source: https://github.com/reacttooltip/react-tooltip/blob/master/docs/docs/examples/provider-wrapper.mdx

Import and render the Tooltip component once, typically in your main App file, to manage tooltips globally. This replaces the need for a dedicated provider component.

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

function App() {
  return (
    <>
      <MyComponent />
      <Tooltip id="app-tooltip" />
    </>
  )
}

export default App
```

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

### Run Full Statistical Benchmark

Source: https://github.com/reacttooltip/react-tooltip/blob/master/benchmarks/README.md

Perform a comprehensive statistical benchmark run. This involves 100 passes across 5 workers and aggregates the results.

```bash
yarn benchmark:scaling:full -r 100 -w 5
```

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

### Aggregate Latest Benchmark Results

Source: https://github.com/reacttooltip/react-tooltip/blob/master/benchmarks/README.md

Aggregate the latest benchmark results. Specify the number of latest results to include in the aggregation.

```bash
node benchmarks/aggregate-benchmarks.mjs --latest 100
```

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

### Dynamic Tooltip Content with Render Prop

Source: https://github.com/reacttooltip/react-tooltip/blob/master/docs/docs/examples/render.mdx

Use the `render` prop to dynamically generate tooltip content. It receives `content` and `activeAnchor` as arguments, allowing you to display information specific to the hovered element. The `activeAnchor` provides a ref to the element, enabling access to its attributes.

```jsx
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>
  )}
/>
```

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

<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>
  )}
/>
```

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

### Live Reload with EventSource

Source: https://github.com/reacttooltip/react-tooltip/blob/master/public/index.html

This snippet sets up a live reload mechanism for the application using EventSource to listen for 'change' events from the '/esbuild' endpoint. Upon receiving a 'change' event, the page will reload.

```javascript
new EventSource('/esbuild').addEventListener('change', () => location.reload())
```

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

### Tooltip Props

Source: https://github.com/reacttooltip/react-tooltip/blob/master/docs/docs/options.mdx

Configuration options for controlling the behavior and appearance of the tooltip.

```APIDOC
## Tooltip Props

This section details the available props for configuring the React Tooltip component.

### `openEvents`

*   **Type**: `Record<string, boolean>`
*   **Default**: `mouseover` `focus`
*   **Allowed Values**: `mouseover`, `focus`, `mouseenter`, `click`, `dblclick`, `mousedown`
*   **Description**: Events to be listened on the anchor elements to open the tooltip.

### `closeEvents`

*   **Type**: `Record<string, boolean>`
*   **Default**: `mouseout` `blur`
*   **Allowed Values**: `mouseout`, `blur`, `mouseleave`, `click`, `dblclick`, `mouseup`
*   **Description**: Events to be listened on the anchor elements to close the tooltip.

### `globalCloseEvents`

*   **Type**: `Record<string, boolean>`
*   **Description**: Global events to be listened to close the tooltip. `escape` closes on pressing `ESC`, `clickOutsideAnchor` is useful with click events on `openEvents`.
*   **Allowed Values**: `escape`, `scroll`, `resize`, `clickOutsideAnchor`

### `imperativeModeOnly`

*   **Type**: `boolean`
*   **Default**: `false`
*   **Description**: When enabled, default tooltip behavior is disabled. Check [the examples](./examples/imperative-mode.mdx) for more details.

### `style`

*   **Type**: `CSSProperties`
*   **Description**: Add inline styles directly to the tooltip.

### `position`

*   **Type**: `{ x: number; y: number }`
*   **Description**: Override the tooltip position on the DOM.

### `isOpen`

*   **Type**: `boolean`
*   **Description**: The tooltip can be controlled or uncontrolled. This attribute can be used to handle showing and hiding the tooltip externally (can be used **without** `setIsOpen`).

### `defaultIsOpen`

*   **Type**: `boolean`
*   **Default**: `false`
*   **Description**: Determines the initial visibility of the tooltip. If true, the tooltip is shown by default; if false or not provided, it's hidden by default.

### `setIsOpen`

*   **Type**: `function`
*   **Description**: The tooltip can be controlled or uncontrolled. This attribute can be used to handle showing and hiding the tooltip externally.
```

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

### Replace html Prop with render Function

Source: https://github.com/reacttooltip/react-tooltip/blob/master/docs/docs/upgrade-guide/changelog-v5-v6.md

Substitute the removed `html` prop with the `render` function for dynamic content generation. The `render` prop accepts a function that returns JSX, allowing for complex and interactive tooltip content.

```jsx
<a data-tooltip-id="my-tooltip">◕‿‿◕</a>
<Tooltip
  id="my-tooltip"
  render={() => (
    <div>
      Hello
      <br />
      <b>rich</b> content
    </div>
  )}
/>
```

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

### Initialize Tooltip with Data Attributes

Source: https://github.com/reacttooltip/react-tooltip/blob/master/docs/docs/examples/basic-examples.mdx

Use data attributes like `data-tooltip-id` and `data-tooltip-content` on anchor elements to define tooltips. The `Tooltip` component itself is then rendered with a matching `id`.

```jsx
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" />
```

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

### Upgrade react-scripts

Source: https://github.com/reacttooltip/react-tooltip/blob/master/docs/docs/troubleshooting.mdx

If you are using `react-scripts`, upgrading to the latest version can resolve import issues. Run this command in your project directory.

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

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

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

### Import react-tooltip CSS

Source: https://github.com/reacttooltip/react-tooltip/blob/master/README.md

Import the default CSS file for react-tooltip. This is required for versions before v5.13.0 to ensure tooltips are displayed correctly. It's recommended to do this once in your application's entry point.

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

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

### Tooltip Props

Source: https://github.com/reacttooltip/react-tooltip/blob/master/docs/docs/options.mdx

This section outlines the available props for the React Tooltip component, detailing their types, requirements, default values, possible values, and descriptions.

```APIDOC
## Tooltip Props

This section outlines the available props for the React Tooltip component, detailing their types, requirements, default values, possible values, and descriptions.

### `ref`
- **type**: Tooltip reference
- **required**: no
- **default**: N/A
- **values**: `React.useRef`
- **description**: Reference object which exposes internal state, and some methods for manually controlling the tooltip. See [the examples](./examples/imperative-mode.mdx).

### `className`
- **type**: `string`
- **required**: no
- **default**: N/A
- **values**: N/A
- **description**: Class name to customize tooltip element. You can also use the default class `react-tooltip` which is set internally.

### `classNameArrow`
- **type**: `string`
- **required**: no
- **default**: N/A
- **values**: N/A
- **description**: Class name to customize tooltip arrow element. You can also use the default class `react-tooltip-arrow` which is set internally.

### `content`
- **type**: `ReactNode`
- **required**: no
- **default**: N/A
- **values**: `string`, JSX, etc.
- **description**: Content to be displayed in tooltip (`string`, JSX, etc.).

### `render`
- **type**: `function`
- **required**: no
- **default**: N/A
- **values**: N/A
- **description**: A function which receives a ref to the currently active anchor element and returns the content for the tooltip. Check the [examples](./examples/render.mdx).

### `place`
- **type**: `string`
- **required**: no
- **default**: `top`
- **values**: `top`, `top-start`, `top-end`, `right`, `right-start`, `right-end`, `bottom`, `bottom-start`, `bottom-end`, `left`, `left-start`, `left-end`
- **description**: Position relative to the anchor element where the tooltip will be rendered (if possible).

### `offset`
- **type**: `number`
- **required**: no
- **default**: `10`
- **values**: any `number`
- **description**: Space between the tooltip element and anchor element (arrow not included in calculation).

### `id`
- **type**: `string`
- **required**: no
- **default**: N/A
- **values**: any `string`
- **description**: The tooltip id. Must be set when using `data-tooltip-id` on the anchor element.

### `anchorSelect`
- **type**: CSS selector
- **required**: no
- **default**: N/A
- **values**: any valid CSS selector
- **description**: The selector for the anchor elements. Check [the examples](./examples/anchor-select.mdx) for more details.
```

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

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

Source: https://github.com/reacttooltip/react-tooltip/blob/master/docs/docs/troubleshooting.mdx

To use React-Tooltip in Next.js 13 without issues in Server Components, create a dedicated client component wrapper. This ensures the tooltip is rendered on the client side.

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

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

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

### Tooltip ImperativeOpenOptions Interface

Source: https://github.com/reacttooltip/react-tooltip/blob/master/docs/docs/examples/imperative-mode.mdx

Defines the options for programmatically opening a tooltip. Use `anchorSelect` to specify a target element, `content` to override tooltip text, and `delay` for timed opening.

```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
}
```

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

### Import Tooltip component

Source: https://github.com/reacttooltip/react-tooltip/blob/master/README.md

Import the Tooltip component from the react-tooltip library for use in your React application.

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

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

### Include the Tooltip component

Source: https://github.com/reacttooltip/react-tooltip/blob/master/README.md

Render the `<Tooltip />` component in your application and provide a unique 'id' prop that matches the 'data-tooltip-id' attributes of your elements. The 'id' prop is mandatory.

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

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

### Usage with ReactTooltip Props

Source: https://github.com/reacttooltip/react-tooltip/blob/master/docs/docs/getting-started.mdx

Configure tooltips by passing props directly to the `<Tooltip />` component, such as `anchorSelect` to target elements via CSS selectors and `place` for positioning. The tooltip content is provided as children.

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

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

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

### React Tooltip with Render Prop for Multiline Content

Source: https://github.com/reacttooltip/react-tooltip/blob/master/docs/docs/examples/multiline.mdx

Utilize the `render` prop on the Tooltip component for a more declarative way to define multiline content. This is useful for dynamic content generation or when you prefer a functional approach.

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

<a data-tooltip-id="my-tooltip-render-multiline"> ◕‿‿◕ </a>
<Tooltip
  id="my-tooltip-render-multiline"
  render={() => (
    <div style={{ display: 'flex', flexDirection: 'column' }}>
      <span>Hello</span>
      <span>some stuff in between</span>
      <span>world!</span>
    </div>
  )}
/>
```

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

### Click to Open Event

Source: https://github.com/reacttooltip/react-tooltip/blob/master/docs/docs/examples/events.mdx

Configure the tooltip to open when the anchor element is clicked. Clicking anywhere outside the anchor will close the tooltip.

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

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

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

### Tooltip Props

Source: https://github.com/reacttooltip/react-tooltip/blob/master/docs/docs/options.mdx

This section lists and describes the available props for the React Tooltip component, allowing for customization of its behavior and appearance.

```APIDOC
## Tooltip Props

This document outlines the available properties for configuring the React Tooltip component.

### `afterShow`

- **Type**: `function`
- **Description**: A function to be called after the tooltip is shown.

### `afterHide`

- **Type**: `function`
- **Description**: A function to be called after the tooltip is hidden.

### `disableTooltip`

- **Type**: `function`
- **Description**: A function that takes a ref to each anchor element and returns a boolean indicating whether to hide the tooltip for that specific anchor.

### `middlewares`

- **Type**: `Middleware[]`
- **Description**: An array of valid `floating-ui` middlewares for advanced customization. Refer to the [floating-ui docs](https://floating-ui.com/docs/middleware) for more information.

### `border`

- **Type**: `CSS border`
- **Description**: Allows modification of the tooltip border style, including the arrow.

### `opacity`

- **Type**: `CSS opacity`
- **Default**: `0.9`
- **Description**: Changes the opacity of the tooltip.

### `arrowColor`

- **Type**: `CSS color`
- **Description**: Modifies the background color of the tooltip arrow.

### `arrowSize`

- **Type**: `number`
- **Default**: `8`
- **Description**: Adjusts the size of the tooltip arrow.

### `disableStyleInjection`

- **Type**: `boolean` or `'core'`
- **Default**: `false`
- **Description**: Controls whether automatic style injection is disabled. This prop should not be set dynamically. See the [styling page](./examples/styling#disabling-reacttooltip-css) for details.

### `role`

- **Type**: `React.AriaRole`
- **Default**: `tooltip`
- **Description**: Sets the ARIA role. Use `'dialog'` if the tooltip contains focusable elements; otherwise, use `'tooltip'`.
```

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

### Tooltip Imperative API

Source: https://github.com/reacttooltip/react-tooltip/blob/master/docs/docs/examples/imperative-mode.mdx

This section details the TypeScript interfaces for controlling the tooltip imperatively, including options for opening and closing, and read-only properties.

```APIDOC
## Tooltip Imperative API

### Interfaces

#### `TooltipImperativeOpenOptions`

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

#### `TooltipImperativeCloseOptions`

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

#### `TooltipRefProps`

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

### Methods

:::info

The imperative methods <b>can</b> be applied alongside regular tooltip usage. For example, you could use just `close()` to close a regular tooltip after an HTTP request is finished.

If you intend to use the tooltip exclusively with these methods, setting the `imperativeModeOnly` prop to disable default behavior is recommended. Otherwise, you might face undesired behavior.

:::

- `open()` opens the tooltip programmatically. All arguments are optional
  - `anchorSelect` overrides the current selector. Ideally, it should match only one element (e.g. `#my-element`)
  - `position` overrides the `position` tooltip prop
  - `place` overrides the `place` tooltip prop
  - `content` overrides the tooltip content, whether it was set through `content`, `render`, or any other way
  - `delay` indicates how long (in ms) before the tooltip actually opens
- `close()` closes the tooltip programmatically
  - `delay` indicates how long (in ms) before the tooltip actually closes
```

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

### Render Tooltip into a Custom DOM Container with portalRoot

Source: https://github.com/reacttooltip/react-tooltip/blob/master/docs/docs/upgrade-guide/changelog-v5-v6.md

Use `portalRoot` to specify a DOM container for rendering the tooltip, useful for managing clipping and overlay layouts. `positionStrategy="fixed"` is recommended when portaling to `document.body`.

```jsx
<Tooltip
  id="my-tooltip"
  content="Hello"
  portalRoot={document.body}
  positionStrategy="fixed"
/>
```

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

### Basic Tooltip Anchor Component

Source: https://github.com/reacttooltip/react-tooltip/blob/master/docs/docs/examples/imperative-mode.mdx

A simple React component to serve as an anchor for tooltips, with basic styling and event handling capabilities.

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

export const TooltipAnchor = ({ children, id, ...rest }) => {
  return (
    <span
      id={id}
      style={{
        display: 'flex',
        justifyContent: 'center',
        margin: 'auto',
        alignItems: 'center',
        width: '60px',
        height: '60px',
        borderRadius: '60px',
        color: '#222',
        background: 'rgba(255, 255, 255, 1)',
        cursor: 'pointer',
        boxShadow: '3px 4px 3px rgba(0, 0, 0, 0.5)',
        border: '1px solid #333',
      }}
      {...rest}
    >
      {children}
    </span>
  )
}
```

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

### Link Local React Packages

Source: https://github.com/reacttooltip/react-tooltip/blob/master/docs/README.md

Configure package.json to link local react packages for development. This should not be updated in GitHub.

```json
"react": "link:../node_modules/react",
    "react-dom": "link:../node_modules/react-dom",
    "react-tooltip": "link:.."
```

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

### Configure Next.js to disable SWC minify

Source: https://github.com/reacttooltip/react-tooltip/blob/master/docs/docs/troubleshooting.mdx

If encountering a `TypeError: f is not a function` in Next.js, disabling SWC minify in `next.config.js` can be a workaround if upgrading Next.js is not immediately possible.

```javascript
/** @type {import('next').NextConfig} */
const nextConfig = {
  reactStrictMode: true,
  swcMinify: false
}

module.exports = nextConfig
```

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

### Tooltip Attributes

Source: https://github.com/reacttooltip/react-tooltip/blob/master/docs/docs/options.mdx

These attributes can be added to any HTML element to enable and configure the tooltip functionality.

```APIDOC
## Tooltip Attributes

These attributes can be added to any HTML element to enable and configure the tooltip functionality.

### 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                                                                                                    |
| 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`                                                                                                                      | 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-auto-close        | number     | false     |             | any positive `number`                                                                                                             | Automatically closes the tooltip after the given time (in ms), even if the anchor is still hovered                                       |
| 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"`)
```

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

### Enable JavaScript for App

Source: https://github.com/reacttooltip/react-tooltip/blob/master/public/index.html

This message indicates that JavaScript is required to run the application. Ensure JavaScript is enabled in your browser.

```html
You need to enable JavaScript to run this app. Please enable JavaScript 😭
```

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

### Set Tooltip Opacity with Prop

Source: https://github.com/reacttooltip/react-tooltip/blob/master/docs/docs/troubleshooting.mdx

To control tooltip opacity without breaking functionality, use the `opacity` prop or the `--rt-opacity` CSS variable. Avoid overriding opacity directly via CSS.

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

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

### Tooltip with TooltipAnchor Component

Source: https://github.com/reacttooltip/react-tooltip/blob/master/docs/docs/options.mdx

Alternatively, use the 'TooltipAnchor' component for a more declarative approach to associating tooltips with elements. The 'content' prop defines the tooltip's text.

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

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

### Customize Animation Delays

Source: https://github.com/reacttooltip/react-tooltip/blob/master/docs/docs/examples/styling.mdx

Override the default CSS variables `--rt-transition-show-delay` and `--rt-transition-closing-delay` to customize the opening and closing animation delays for tooltips.

```css
:root {
  --rt-transition-show-delay: 0.15s;
  --rt-transition-closing-delay: 0.15s;
}
```