鼠标移动后悬停时的 SVG 自定义工具提示

Question

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

---

初始消息。 JSFiddle。

工具提示需要跟随光标。我对图像区域标签使用了类似的代码。但它被包裹在 div 标签中。我读过 div 标签不应该与 SVG 一起使用，可以用 g 标签代替它们。目前的结果是一个rect是分离的，文本是可见的。

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

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';  
};

工具提示需要跟随光标。我对图像区域标签使用了类似的代码。但它被包裹在 div 标签中。我读过 div 标签不应该与 SVG 一起使用，可以用 g 标签代替它们。目前的结果是。矩形是独立的，文本是可见的。我打算稍后将图像和文本都放在工具提示中。