javascript - 如果我可以在源代码中看到我的工具提示，为什么它没有显示？

Question

我已经编写了一个显示图表的小网页，但现在我在显示工具提示时遇到问题。它已正确附加到 DOM，但我在页面上看不到它。

 d3.selectAll("circle")
        .on("mouseover", function(d){
            d3.select(this)
                .transition()
                .attr("r", circle_size_hover)
                .duration(transition_duration)
                .style("opacity", 1);

            d3.select(this)
                .append("div")
                    .attr("class", "mytooltip")
                    .text(d.alarms)
                    .transition()
                    .style("opacity", 1);

            console.log(d.alarms);
        });

之后我可以在 DOM 中看到我的 div:

<g class="circles">
    <circle cx="79.34074074074073" cy="113.50243902439024" r="7" style="opacity: 0.7;">
    <div class="mytooltip">51.28205128205128</div>
    </circle>
</g>

CSS:

.mytooltip {
    position: absolute;           
    text-align: center;           
    width: 60px;                  
    height: 28px;                 
    padding: 2px;             
    font: 12px sans-serif;        
    background: lightsteelblue;   
    border: 0px;      
    border-radius: 8px;           
    pointer-events: none;         
}

JSFiddle:http://jsfiddle.net/L42LU/4/

Answer 1

您可以直接将 html 元素添加到正文并按如下方式放置工具提示

d3.select("body").append("div").attr("class","tooltip")
                                .style("top",(d3.event.clientY - 10) + "px")
                                .style("left",(d3.event.clientX + 10) + "px")
                                .style("z-index", "10")
                                .style("visibility", "visible")
                                .text(d.alarms);

以上工具提示将显示在鼠标指针位置。 同样，在鼠标悬停事件中，您只需更改可见性样式即可隐藏此工具提示。

工具提示 CSS:

div.tooltip {
        position: absolute;
        text-align: left;
        padding: 8px;
        font: 12px Verdana;
        background: lightsteelblue;
        border: 0px;
        border-radius: 8px;
        pointer-events: none;
    }