SVG 툴팁이 즉시 사라집니다.

여러 지역이있는지도가 있으며 그 위에 마우스를 올려 놓을 때 툴팁의 이름과 함께 툴팁을 표시하려고합니다.SVG 툴팁이 즉시 사라집니다.

툴팁은 표시되지만 즉시 사라집니다. 도구 설명 (g, a 또는 polygon)을 어디에 두어도 상관 없지만 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 I는 P 또는 IMG 요소의 툴팁을 사용하면 소자 호버하면서 툴팁 유지

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

출처

2017-11-07 suntrop

UIkit이 SVG 요소에 툴팁을 지원하지 않는 것처럼 보입니다. 열려있는 툴팁을 열어 둘지 여부를 결정하기 위해 UIkit은 정기적으로 isVisible() 함수를 호출합니다.이 함수는 대상 요소의 offsetHeight을 읽습니다. SVG 요소에는 offsetHeight이 없습니다. https://www.chromestatus.com/features/5724912467574784

따라서 UIkit은 요소가 숨겨져 있으며 즉시 툴팁을 숨 깁니다.

출처

2017-11-07 17:58:21 Sphinxxx

SVG 툴팁이 즉시 사라집니다.

답변

관련 문제