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

You can add html element to the body directly and position your tooltip as follows

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

The above tooltip will be shown at mouse pointer position. Again on mouseout event you can hide this tooltip by just changing the visibility style.

Tooltip CSS:

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

Answer 2

<div>在 SVG中插入 HTML 元素（例如 a ）是无效的。您也许可以将工具提示作为foreignObject元素插入 SVG 中。