2017-11-07 5 views
0

私はいくつかの地域を持つ地図を持っており、その上に乗るときにその名前のツールチップを表示したいと思います。SVGのツールチップがすぐに消えます

ツールチップが表示されますが、すぐに消えます。私はツールチップ(g、aまたはポリゴン)をどこに置いても問題ありませんが、gノードが正しい場所だと思います。 3つの円と

例:

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 IがPまたはIMG要素にツールチップを使用する場合は要素をホバリングしながら、ツールチップが留まる

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

答えて

0

UIkitはSVG要素のツールチップをサポートしていないようです。開いているツールチップを開いたままにする必要があるかどうかを判断するために、UIkitは定期的にisVisible()関数を呼び出し、これがターゲット要素のoffsetHeightを読み取ります。 SVG要素にはoffsetHeightが含まれていません。https://www.chromestatus.com/features/5724912467574784

したがって、UIkitは要素が非表示であり、すぐにツールチップを隠すと考えています。

関連する問題