Toolip with dynamic content won't hide when getContent() returns null

[ChrisShawK2]

The tooltip target is a React component that holds a html canvas element. As the mouse moves over different objects drawn on the canvas, the tooltip text reflects the currently-hovered object.

When the page is first shown, the mouse is over an empty portion of the canvas, getContent() retuns null, and the Tooltip is not shown.

If the mouse moves over a shape drawn on the canvas, the tooltip appears, with the appropriate text, and follows the mouse.

As soon as the mouse moves back to an empty portion of the canvas, getContent() retuns null, but the tooltip remains visible (with its last text) at the point that the mouse left the drawn shape. I would expect it to hide itself as soon as getContent() returned null -- what am I missing?

(BTW, I'm using Firefox v85.0.2)

[ChrisShawK2]

One more point: If the mouse leaves the browser entirely (mousing to another portion of my screen), the tooltip remains visible (at its last-valid point), but it hides when the mouse re-enters the canvas.

[DeveloperBlue]

To your last point, where the tooptip remains visible even after leaving the browser:

I just ran into this issue, and had to use this workaround. It listens for when the mouse leaves the document window and calls ReactTooltip.hide();

import ReactTooltip from 'react-tooltip';

function addEvent(obj : any, evt : string, fn : Function) {
    if (obj.addEventListener) {
        obj.addEventListener(evt, fn, false);
    }
    else if (obj.attachEvent) {
        obj.attachEvent("on" + evt, fn);
    }
}

// I placed this inside the component that renders <ReactTooltip/>
addEvent(document, "mouseout", function(e : any) {
    e = e ? e : window.event;
    var from = e.relatedTarget || e.toElement;
    if (!from || from.nodeName == "HTML") {
        ReactTooltip.hide();
    }
});

Source

I only tested this on Chrome 97, so YMMV on other browsers.