sandbox for the Tooltip example on website is not working

[scho3034]

Example sandbox of tooltip is not working.
https://www.react-simple-maps.io/examples/map-chart-with-tooltip/

[santimone]

change on sandbox de import ReactTooltip for import { Tooltip as ReactTooltip } from 'react-tooltip';

[bnbon]

Even then, I think v5 react-tooltip works quite differently so would need a new example beyond the above change.

[gabrieljablonski]

The easy fix is to update the CodeSandbox to use [email protected], instead of react-tooltip@latest.

The other alternative is to update the example to cover the new version (v5). If anyone decides to take that on, and changes to react-tooltip would make it easier somehow, I'd be willing to help as one of the maintainers of react-tooltip.

[scho3034]

@gabrieljablonski There is one other issue with using react-tooltip v5. The tooltip does not display on top of the marker. Instead it displays below in the div, but using v4 or below it displays properly on top of the marker.

[gabrieljablonski]

@gabrieljablonski There is one other issue with using react-tooltip v5. The tooltip does not display on top of the marker. Instead it displays below in the div, but using v4 or below it displays properly on top of the marker.

That sounds like something that would happen if you're not doing import "react-tooltip/dist/react-tooltip.css";.

If that's not the case, please open an issue over there with sample code, preferably a CodeSandbox, demonstrating the problem.

[gabrieljablonski]

@scho3034 you should probably keep this issue open, since the example on the website still needs to be fixed.

[Tokelin]

@gabrieljablonski even adding the CSS import, the content is still displayed below the map. To get the desired effect the float option needs to be added to the Tooltip, that way it's always displayed below the mouse.

Here is a codesandbox with a working tooltip.