D3.js – Why is the tooltip flashing on and off

d3.jstooltip

I am creating a tooltip after this example.

For some reason, my tooltip flashes on and off as I move the mouse. As I understand it, the mousemove() function finds the closest datapoint; so as long as the mouse is over the .overlay rectangle, the tooltip should always be showing.

Any ideas? Here's my fiddle:

http://jsfiddle.net/samselikoff/zhMQ8/1/

Best Answer

The flickering happens because the tooltip sometimes appears below the mouse and causes mouseout be called and that again removes the tooltip and again the mouse is over the element so mouseover is called and the cycle continues...

Make a little gap (where I added 5), so the tooltip won't come under the mouse:

tooltip.attr("transform", "translate(" + (xScale(d.date)   + 5  ) + ",0)");

EDIT Another, maybe a better, way to avoid the tooltip affecting the mouse is to give it styling:

pointer-events: none;

Related Solutions

Wpf tooltip on mouseover and mouseout

Your question isn't completely clear, and I'm not sure what you're looking for, but the things that will affect ToolTip duration follow:

ToolTipService.InitialShowDelay - Length of time in milliseconds between hovering over a control and when the tooltip appears. 0 = instant.

ToolTipService.ShowDuration - Length of time in milliseconds a tooltip will hang around while the mouse is over it. Setting it really high will be effectively a "never turn off" option, but there isn't a true always option.

ToolTipService.BetweenShowDelay - Once a tooltip pops up, this is the amount of time that must pass before InitialShowDelay is again observed.

Example:

<TextBox ToolTipService.InitialShowDelay="5000" 
ToolTipService.ShowDuration="2000" 
ToolTipService.BetweenShowDelay="10000" 
ToolTip="This is a tool tip." />

With this, when you hover over the TextBox, a tooltip will show up after five seconds. It will hang around for two seconds. And until you haven't looked at a tooltip for 10 seconds, there will be no delay between hover and pop-up.

Javascript – Add a tooltip to a div

For the basic tooltip, you want:

<div title="This is my tooltip">

like:

.visible {
  height: 3em;
  width: 10em;
  background: yellow;
}

<div title="This is my tooltip" class="visible"></div>

For a fancier javascript version, you can look into:

https://jqueryhouse.com/best-jquery-tooltip-plugins/

The above link gives you 25 options for tooltips.

Best Answer

Related Solutions

Wpf tooltip on mouseover and mouseout

Javascript – Add a tooltip to a div

Related Topic