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

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

Answer 2

您可以直接将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);

上面的工具提示将显示在鼠标指针位置。再次在mouseout事件中，您可以通过更改可见性样式来隐藏此工具提示。

工具提示CSS：

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

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

2 个答案: