鼠标移动后 hover 上的 SVG 自定义工具提示

Question

我在 JSFiddle 上修修补补。 面临的问题是，如果悬停任何其他矩形，则 onmouseleave 第三个矩形会留下铭文。 有人可以解决这个问题吗？ 所以 onmouseleave 工具提示完全消失了？

---

初始消息。 JSF中。

工具提示需要遵循 cursor。 我使用了带有图像区域标签的类似代码。 但它被包裹在 div 标签上。 我读过 div 标签不应该与 SVG 一起使用，并且可以用 g 标签替换它们。 目前的结果是一个矩形是独立的并且文本是可见的。

边注。 我打算稍后将图像和文本都放在工具提示中。

HTML

 <svg>
 
   <g class="tooltip"><rect x="10" y="10" width="100" height="50"><span id="tooltip-span1">Some text</span></rect></g>
  
 </svg>

CSS

.tooltip {
    text-decoration:none;
    position:relative;
}
.tooltip span {
    display:none;
}
    
.tooltip:hover span {
    display:block;
    color:aliceblue;
    font-size:24pt;
    font-weight: bold;
    padding:10px;
    border: 1px solid coral;
    position:fixed;
    overflow:hidden;
     text-shadow: -1px 3px 0px #000,
                          1px 3px 3px #000,
                         1px -1px 3px #000,
                        -1px -1px 3px #000;
}

Javascript

var tooltipSpan1 = document.getElementById('tooltip-span1');
    
window.onmousemove = function (a) {
    var d = a.clientX,
        c = a.clientY;
    tooltipSpan1.style.top = (c + 20) + 'px';
    tooltipSpan1.style.left = (d + 20) + 'px';  
};

工具提示需要遵循 cursor。 我使用了带有图像区域标签的类似代码。 但它被包裹在 div 标签上。 我读过 div 标签不应该与 SVG 一起使用，并且可以用 g 标签替换它们。 目前的结果是。 一个矩形是分开的，文本是可见的。 我打算稍后将图像和文本都放在工具提示中。