Question

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

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

三个圆圈的示例：

<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元素上使用工具提示时，工具提示会在悬停元素时停留。

Answer 1

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

因此，UIkit认为该元素是隐藏的，并且也会立即隐藏工具提示。

SVG工具提示立即消失

1 个答案: