Question

很抱歉，如果部分重复，则无法找到任何满意的答案。

我有一个d3图表，由一条带点的线组成。我的观点有使工具提示出现/消失的事件，见下文：

var div = d3.select("body")
    .append("div")
    .attr("class", "tooltip")
    .style("opacity", 0);

var points = g.selectAll(".point")
    .data(data).enter().append("rect")
    .attr("class", "point")
    .on('mouseover', function(d, i) {

        var xPos = parseFloat(d3.select(this).attr('x')) + margin.left
        var yPos = parseFloat(d3.select(this).attr('y')) + margin.top - 20

        div.interrupt();
        div
            .style("left", xPos + 'px')
            .style("top", yPos + 'px')
            .style('opacity', 0.9);

        div.html('<p><strong>Upper Text</strong></p><p>Lower Text</p>');
    })
    .on('mouseout', function(d, i) {
        div
            .transition().delay(1000)
            .style("opacity", 0);
    });

这很好用：当我将鼠标悬停在它上面时，工具提示会出现在我的点附近，并在我将光标移开后1秒消失。

我想要的是什么：如果我将鼠标悬停在工具提示本身上，则会中断工具提示后退，如果我将光标移离它，则会使其消失。

（即如果工具提示有文本和链接，我希望用户能够将光标从点移动到工具提示，然后只要光标在它上面就保持工具提示可见）

我试过了：

var div = d3.select("body")
   .append("div")
   .attr("class", "tooltip")
   .style("opacity", 0)
   // on mouseover, interrupt the transition triggered when I moved
   // the cursor away from the point and over the tooltip
   .on('mouseover', function() {
       d3.select(this)
           .interrupt();
   })
   // on mouseout, quickly fade the tooltip away
   .on('mouseout', function() {
       d3.select(this)
           .transition().duration(100)
           .style("opacity", 0.0);
   });

但似乎工具提示并不包含我试图绑定到它的事件监听器。

我的问题是：如何将事件侦听器添加到工具提示中，以便在我将光标从点移动到工具提示时它将保持可见？

Answer 1

正如Gerardo所指出的，代码实际上是有效的。我之所以认为不是因为我的css如下：

.tooltip {
    position: absolute;
    text-align: center;
    width: auto;
    height: auto;
    padding: 5px;
    border: 0px;
    border-radius: 8px;
    pointer-events: none;
}

pointer-events: none显然禁用了工具提示中的所有DOM事件。删除此行解决了我的问题。

具有自己的事件监听器的工具提示

1 个答案: