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

为什么我的d3 html div工具提示不会隐藏在mouseout上？

1 个答案: