Mouseover for plot does not go away when changing from scalars to images

[rsbowen]

The reproduction steps are:

1. Choose the "scalars" tab
2. Scroll so that a graph is partially obscured by the orange bar
3. Mouse over the graph so that the tooltip/mouseover appears:

4. Move mouse straight up into the orange bar, then over to click on "images"
5. Observe that tooltip stays there:

The tooltip will stay there until you move back to the scalar tab or the page autoreloads. This can be very annoying for longer tooltips!

Chrome 83, running on a Pixelbook.

[stephanwlee]

Acknowledging the bug. This is a known issue and the regression happened when we upgraded the Polymer v2 (where we use the real shadow DOM). Event handling got trickier with the shadow DOM and there is no good solution other than (1) IntersectionObserver and (2) maybe a global event handler.

[agentydragon]

Also suffering from this issue. It's not specific to just switching between those tabs - looks more like if mouseout happens in some way Tensorboard didn't expect, the label just hangs on in there.

I can get rid of the tooltip by going back to the same graph that made it, and mouseovering and mouseouting out of it again slower.

[LucaBonfiglioli]

This is bugging me a lot too. If you have many logging graphs, finding the one that caused the issue, then mouse-in and mouse-out to get rid of the tooltip can be really bothersome.

[orsharir]

While I wish I had the web expertise to propose a proper PR, to anyone else who might encounter this issue, here's a "dumb" hack around it. You can use the following snippet and create a bookmarklet from them:

# Set tooltip opacity to 0 when pointer os over app header
document.getElementsByTagName("app-header")[0].addEventListener("mouseenter", function( event ) {
	document.querySelectorAll("vz-line-chart-tooltip").forEach(x => {x.style.opacity = 0}); 
}, false);

# Set tooltip opacity to 0 when pointer is out of window.
document.documentElement.addEventListener("mouseleave", function( event ) {
	document.querySelectorAll("vz-line-chart-tooltip").forEach(x => {x.style.opacity = 0});
}, false);

The above adds two event listeners, a "mouse leave" event for existing the window and a "mouse enter" event when going over the header at the top of Tensorboard. When one of the events fires, it will hide all tooltips by setting their opacity to 0. You could use any bookmarklet converter website to convert the above code into a bookmarklet, and then you can "fix" this problem by activating it each time you open Tensorboard (or refresh the page).