Tool Tips remain after GeoMap page is unloaded and browser displays another 'page'.

[strafton]

First off , thank you for creating this for react. It's working great except for the tooltips which once they are opened remain open even when the page unloads for another screen.

I am using the GeoMap with points defined. When you hover over the point it displays some information and when you click on the point the user is navigated away from the page. The issue is the information displayed in the tool tip never disappears until you go back to the map and hover over another point.

Any ideas on how to fix this issue would be greatly appreciated since there doesn't not appear to be a handle to the svg objects anywhere.

const methods = { //status: 0 good, 50 -out of range 100- critical data: data , pointSizeMax: 5, pointSizeMin: 1,

            // hides ColorScale, but still allows coloring shapes
            colorScalePosition: false,
            colorScale:"status",
            colorScaleConfig:{
                color: ["blue",  "green",  "red"],
            },
            groupBy:["label"],
            color:{
                value: "status"
            },

            label:(d)=> {
                return d.label  ;
            },

            legend: false,
            point:(d)=> {
                return [d.lon, d.lat];
            },on: {
                "click.shape": (d) => this.poolSelectHandler(d),
            },

        };

        geoGraph = <Geomap config={methods} /> ;

//// poolSelectHandler = (d) => { this.props.onSetCompanyId(d.cId); this.props.history.push( '/info/'); };

This is happening in all browsers, Chrome, Firefox and Safari on a Mac Desktop.

[davelandry]

@strafton thanks reporting this, and for the kind words! 🍻

This is a really good point, and I think d3plus-react could handle this with something like a componentDidUnmount event. In the meantime, since I'm the only dev here and this isn't at the top of my todo... here's a hack that we've used in other projects:

You can manually target the d3plus tooltip and remove it from the page. Depending on your project, this code could live in something like a react-router middleware where you able to detect the page change, or maybe even directly in your on click event:

d3.selectAll(".d3plus-tooltip").remove();

(I'm using d3-selection here, but this could be written in any library with query selection, or just raw vanilla JS)

[strafton]

@davelandry thank you for this tip. I was able to get it working using raw vanilla JS since react didn't seem to have a handle to the d3 object itself. Much appreciated!

// inside the onClick handler
let toolTips = document.getElementsByClassName("d3plus-tooltip");
Array.from(toolTips).forEach(function (element) {
         element.remove();
 });