Vital V Vital V - 3 months ago 18
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>
</div>


Which has the following style

#tooltip {
position: absolute;
somestyleattributteshere;
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
d3.select("#tooltip")
.select("#value")
.html(('charge:' + d.charge + '<br/>intensity: ' + d.m_intensity)
d3.select("#tooltip").classed("hidden", false)
)
msBarTextLabels.on("mouseout", d3.select("#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?

Thanks

Answer

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

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