Tooltip is not working

[shivam-880]

The tooltip is not working with the latest version of this tool. Following is a contrived example. Please suggest!

package.json

{
  "name": "react-tooltip-example",
  "homepage": "https://reacttooltip.github.io/react-tooltip/",
  "version": "1.0.0",
  "license": "MIT",
  "dependencies": {
    "gh-pages": "^2.1.1",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-scripts": "^5.0.1",
    "react-tooltip": "^5.26.3"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test --env=jsdom",
    "eject": "react-scripts eject",
    "predeploy": "yarn build",
    "deploy": "gh-pages -d build"
  }
}

index.js

import React from 'react';
import ReactDOM from 'react-dom';

import './index.css';

import App from './App';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<App />);

App.js

import React, { Component } from 'react'

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

export default class App extends Component {
  render() {
    return (
      <div className="example-jsx">
        <div className="side">
          <a data-tip data-for="global">
            σ`∀´)σ
          </a>
        </div>
        <ReactTooltip id="global" aria-haspopup="true">
          <p>This is a global react component tooltip</p>
          <p>You can put every thing here</p>
          <ul>
            <li>Word</li>
            <li>Chart</li>
            <li>Else</li>
          </ul>
        </ReactTooltip>
      </div>
    )
  }
}

[shivam-880]

This seems to be working with version from the example: https://github.com/ReactTooltip/react-tooltip/blob/master/example/package.json#L11

"react-tooltip": "^4.5.1"

[gabrieljablonski]

Your sample code is from an older example from V4. V5 has a different API.

Please see the V5 docs.

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

We'll be removing the outdated examples soon, sorry about that.