如何分别在mouseenter和mouseleave上显示和隐藏工具提示消息?

时间:2018-05-19 17:34:29

标签: angular d3.js

我想在mouseenter上显示一些消息,并在mouseleave上隐藏该消息。虽然mouseenter事件工作正常,但mouseleave事件不起作用。即使删除指针,工具提示消息也会保留。如何解决?

    .on("mouseenter", function(d: PieArcDatum<BandMembers>) {
         let xPosition = d3.mouse(this)[0] - 15;
         let yPosition = d3.mouse(this)[1] - 25;
         d3.select(this);

         tooltip.attr("transform", "translate(" + xPosition + "," + yPosition + ")");
         tooltip.select("text").text(d.data.Members) 
})
    .on("mouseleave", function(d: PieArcDatum<BandMembers>) {
         d3.select(this)
         tooltip.style("display", null); 
})

2 个答案:

答案 0 :(得分:0)

请尝试.style("display", "none")

答案 1 :(得分:0)

您应该将此tooltip.style("display", null);更改为tooltip.style("display", none);,这会为鼠标离开事件添加类似display: none的样式

相关问题