search

zcreativelabs / react-simple-maps

Beautiful React SVG maps with d3-geo and topojson using a declarative api.
https://www.react-simple-maps.io/
MIT License
3.07k stars 424 forks source link

sandbox for the Tooltip example on website is not working #314

Open scho3034 opened 1 year ago

scho3034 commented 1 year ago

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

santimone commented 1 year ago

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

bnbon commented 1 year ago

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

gabrieljablonski commented 1 year ago

The easy fix is to update the CodeSandbox to use react-tooltip@4.5.1, 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 commented 1 year ago

@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 commented 1 year ago

@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 commented 1 year ago

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

Tokelin commented 1 year ago

@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.