javascript - 为什么我的 d3 html div 工具提示不会在鼠标移出时隐藏？

Question

所以我在 myview.haml 中定义了我的 html 工具提示:

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

具有以下样式

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

#tooltip.hidden { 
  display: none;
}

我的 html div 工具提示在鼠标悬停时显示如下(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) )

因此，工具提示在鼠标悬停时正确取消隐藏并提供正确的数据，但它们不会在鼠标移开时隐藏，

关于为什么会发生这种情况的任何提示？

谢谢

Answer 1

正如@Lars 所说，您实际上并没有将回调函数传递给mouseout 处理程序。相反，它实际上是在执行 d3.select("#tooltip").classed("hidden", true) 并传递结果(d3 选择)。更改为:

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