0

我有一张包含多个区域的地图，并且希望在将鼠标悬停在其上时显示带有其名称的工具提示。

工具提示将显示但立即消失。我将工具提示（g、a 或多边形）放在哪里并不重要，但我相信 g 节点是正确的位置。

三个圆圈的例子：

https://codepen.io/suntrop/pen/BmLZzN

<svg width="246px" height="64px" viewBox="0 0 246 64" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <!-- Generator: Sketch 47.1 (45422) - http://www.bohemiancoding.com/sketch -->
    <desc>Created with Sketch.</desc>
    <defs></defs>
    <g class="testtooltip" title="My Tooltip" id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
        <circle id="Oval" fill="#D8D8D8" cx="32" cy="32" r="32"></circle>
    </g>
    <g class="testtooltip" title="Will Show" id="Page-2" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
        <circle id="Oval" fill="#B8E986" cx="123" cy="32" r="32"></circle>
    </g>
    <g class="testtooltip" title="And Hide" id="Page-3" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
        <circle id="Oval" fill="#D8D8D8" cx="214" cy="32" r="32"></circle>
    </g>
</svg>

JS

$(function() {
        UIkit.tooltip('.testtooltip').show();
});

当我在 P 或 IMG 元素上使用工具提示时，工具提示会在悬停元素时保持不变。

4

1 回答 1

0

看起来 UIkit 不支持 SVG 元素的工具提示。为了决定一个打开的工具提示是否应该保持打开，UIkit 定期调用一个isVisible()函数，该函数依次读取目标元素的offsetHeight. SVG 元素没有offsetHeight：https ://www.chromestatus.com/features/5724912467574784

因此，UIkit 认为该元素已隐藏，并立即隐藏了工具提示。

于 2017-11-07T17:58:21.920 回答