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

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)
)