Tooltip is not rendering correctly

[shivam-880]

I am trying to make use of this tool in following contrived example and the tool tip doesn't seem to be rendering correctly. Not sure what is wrong. Please suggest!

Screen.Recording.2024-04-01.at.4.11.53.pm.mov

package.json

{
  "name": "react-heatmap-demo",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@uiw/react-heat-map": "^2.2.2",
    "@uiw/react-tooltip": "^4.22.3",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-scripts": "5.0.1"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

Demo.js

import React from 'react';
import Tooltip from '@uiw/react-tooltip';
import HeatMap from '@uiw/react-heat-map';

const value = [
  { date: '2016/01/11', count:2 },
  ...[...Array(17)].map((_, idx) => ({ date: `2016/01/${idx + 10}`, count: idx, })),
  ...[...Array(17)].map((_, idx) => ({ date: `2016/02/${idx + 10}`, count: idx, })),
  { date: '2016/04/12', count:2 },
  { date: '2016/05/01', count:5 },
  { date: '2016/05/02', count:5 },
  { date: '2016/05/03', count:1 },
  { date: '2016/05/04', count:11 },
  { date: '2016/05/08', count:32 },
];

const Demo = () => {
  return (
        <HeatMap
          value={value}
          startDate={new Date('2016/01/01')}
          rectRender={(props, data) => {
            if (!data.count) return <rect {...props} />;
            return (
              <Tooltip placement="top" content={`count: ${data.count || 0}`}>
                <rect {...props} />
              </Tooltip>
            );
          }}
        />
  )
};

export default Demo;

App.js

import Demo from './Demo';

function App() {
  return (
    <div
      style={{
        width: 900,
        height: 200,
        display: 'flex',
        margin: 'auto',
        marginTop: '100px',
      }}
    >
      <Demo />
    </div>
  );
}

export default App;

index.js

import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';

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

[jaywcjlove]

@iamsmkr

• How to make a custom Tooltip #62 (comment)

[shivam-880]

@jaywcjlove I am doing that already. Did you have a look a the Demo.js I posted in this issue?

 <HeatMap
          value={value}
          startDate={new Date('2016/01/01')}
          rectRender={(props, data) => {
            if (!data.count) return <rect {...props} />;
            return (
              <Tooltip placement="top" content={`count: ${data.count || 0}`}>
                <rect {...props} />
              </Tooltip>
            );
          }}
/>

[jaywcjlove]

@iamsmkr I didn't find any issues while looking at the examples: https://codesandbox.io/embed/sweet-aj-jpl6mx?fontsize=14&hidenavigation=1&theme=dark

[goncaloalves]

I was with the same error and was unable to resolve it.

I ended up using react-tooltip

its pretty straight forward:

<div>
  <HeatMap
            value={value}
            startDate={new Date('2016/01/01')}
            rectRender={(props, data) => {
              if (!data.count) return <rect {...props} />;
              return (
                  <rect {...props} data-tooltip-id="my-tooltip" data-tooltip-content={`${data.date}: ${data.count || 0} posts`}/>
              );
            }}
  />
  <Tooltip id="my-tooltip" />
</div>

[cr35wx]

This may not be a good permanent solution, but i found turning off React.StrictMode fixes this rendering problem. I am using react-heat-map and (@uiw/)react-tooltip with vite, so I changed my main.jsx to look like this:

ReactDOM.createRoot(document.getElementById('root')).render(  
  /* <React.StrictMode> */  
    <App />  
  /* </React.StrictMode>, */  
)

[mentaLwz]

I have the same problem, the tooltip is aways on the top left corner, i am using nextjs.

[markau]

@mentaLwz follow @goncaloalves solution

[marcosagni98]

Same problem, it also rerenders, the component entirely