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

Why my tooltip is not shown if I can see it in the source?

本文关键字：源代码 我可以 如果 工具提示 我的 显示 为什么      更新时间：2023-09-26

我写了一个显示图形的小网页，但现在我在显示工具提示时遇到了问题。它被正确地附加到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/

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

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

相关文章：