Vital V Vital V - 1 year ago 61
CSS Question

Why won't my d3 html div tooltips hide on mouseout?

So I have my html tooltip defined in myview.haml:

<div id="tooltip" class="hidden">
<span id="value">whatever</span>

Which has the following style

#tooltip {
position: absolute;
pointer-events: none;

#tooltip.hidden {
display: none;

My html div tooltips show on mouseover like so (coffeescript):

msBarTextLabels.on("mouseover", (d) ->
xPosition = svgContainer.offsetLeft
yPosition = svgContainer.offsetTop"#tooltip")
.html(('charge:' + d.charge + '<br/>intensity: ' + d.m_intensity)"#tooltip").classed("hidden", false)
msBarTextLabels.on("mouseout","#tooltip").classed("hidden", true) )

So the tooltips un-hide correctly on mouseover with the correct data and all, but they do not hide on mouseout,

Any hint on why is that happening?


Answer Source

As @Lars said, you're not actually passing a callback function to the mouseout handler. Instead, it's actually executing"#tooltip").classed("hidden", true) and passing the result (a d3 selection). Change to:

msBarTextLabels.on("mouseout", (d) ->"#tooltip").classed("hidden", true)