경로의 위쪽에 툴팁을 배치하는 방법은 무엇입니까? SVG Map

Question

javascript를 처음 사용하고 SVG 맵에서 요소/경로의 위쪽 툴팁 위치를 지정하려고합니다. 현재 툴팁은 .mousemove을 따르지만 상단 중앙에 고정시키고 싶습니다. 약간의 간격을두고 조정하면 선택 영역과 거의 겹치지 않습니다. 여기

는 JSfiddle에 코드입니다 : https://jsfiddle.net/mwalker005/a8vrmw06/

$("path, polygon").hover(function(e) { 
 
    $('#info-box').css('display','block'); 
 
    $('#info-box').html($(this).data('info')); 
 
}); 
 

 
$("path, polygon").mouseleave(function(e) { 
 
    $('#info-box').css('display','none'); 
 
}); 
 

 
$(document).mousemove(function(e) { 
 
    $('#info-box').css('top',e.pageY-$('#info-box').height()-40); 
 
    $('#info-box').css('left',e.pageX-($('#info-box').width())/2); 
 
}).mouseover(); 
 

 
var ios = /iPad|iPhone|iPod/.test(navigator.userAgent) && !window.MSStream; 
 
if(ios) { 
 
    $('abbr').on('click touchend', function() { 
 
    var link = $(this).attr('href'); 
 
    window.open(link,'_blank'); 
 
    return false; 
 
    }); 
 
}

#map-example{ 
 
    display: block; 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    width: 100%; 
 
} 
 

 

 
path:hover, polygon:hover { 
 
    fill: #20487c !important; 
 

 
} 
 

 
#info-box { 
 
    background-color: #333; 
 
    border-bottom: 3px solid #3498DB; 
 
    color: #fff; 
 
    display: none; 
 
    font-family: arial; 
 
    left: 0px; 
 
    padding: 5px; 
 
    position: absolute; 
 
    top: 0px; 
 
    width: 150px; 
 
    z-index: 1; 
 
} 
 

 
#info-box:after { 
 
    content: ''; 
 
    display: block; 
 
    position: absolute; 
 
    left: 35px; 
 
    top: 100%; 
 
    width: 0; 
 
    border: 10px solid transparent; 
 
    border-top-color: #3498DB; 
 
}

<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script> 
 

 
<div id="info-box"></div> 
 

 
<svg version="1.1" id="map-example" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" 
 
\t viewBox="0 0 300 200" style="enable-background:new 0 0 300 200;" xml:space="preserve"> 
 
<path id="area 01" data-info="<div>Area 01:</div><div>More Info about area</div>" fill="#D3D3D3" d="M90.5,72.5v12l7,1v12h20l3-27C120.5,70.5,108,77,90.5,72.5z"/> 
 
<path id="area 02" data-info="<div>Area 02:</div><div>More Info about area</div>" fill="#D3D3D3" d="M89,72v14l7,1v12h21v17l-23-2l-11-6V93c0,0-6-7-16-5l5-33C72,55,80,59,89,72z"/> 
 
<polygon id="area 03" data-info="<div>Area 03:</div><div>More Info about area</div>" fill="#D3D3D3" points="120,87 119,97 119,112 138,120 155,108 155,93 136,83 "/> 
 
<polygon id="area 04" data-info="<div>Area 04:</div><div>More Info about area</div>" fill="#D3D3D3" points="138,122 143,131 146,129 152,137 155,135 159,138 159,152 174,146 199,131 
 
\t 225,117 219,108 199,108 170,101 157,94 156.5,108.5 "/> 
 
<path id="area 05" data-info="<div>Area 05:</div><div>More Info about area</div>" fill="#D3D3D3" d="M122,70l-2,15l17-4l33,18l15,3l15-9l-21-29l-5,3l-17-19c0,0-16,10-22,15 
 
\t C127.9,68.9,122,70,122,70z"/> 
 
<path id="area 06" data-info="<div>Area 06:</div><div>More Info about area</div>" fill="#D3D3D3" d="M158,47.2l16.8,18.1l4.9-3l22.7,31.2l-15.8,10L198,106l22.7,1l5.3,9l12-6l7.5-27.1 
 
\t l-4.9-20.1l-24.7-32.2c0,0-7.9-8-20.8-1l-3-3C192.1,26.6,175,36,158,47.2z"/> 
 
<polygon id="area 07" data-info="<div>Area 07:</div><div>More Info about area</div>" fill="#D3D3D3" points="102,117 101,139 93,145 95,150 95,156 90,156 87,150 83,150 83,157 73,157 
 
\t 73,154 78,150 70,137 67,139 65,134 67,130 75.5,129.5 79.5,122.5 83.5,110.5 94.5,116.5 "/> 
 
<polygon id="area 08" data-info="<div>Area 08:</div><div>More Info about area</div>" fill="#D3D3D3" points="81,95 81,108 78,121 74,128 65,128 63,132 54,132 54,128 40,127 40,122 
 
\t 43,122 47,117 51,117 51,110 56,110 56,95 63,95 67,90 70,90 77,91 "/> 
 
<polygon id="area 09" data-info="<div>Area 09:</div><div>More Info about area</div>" fill="#D3D3D3" points="104,118 119,118 119,114 135,121 142,133 146,131 151,138 147,141 141,136 
 
\t 120,150 104,137 "/> 
 
</svg>

Answer 1

는 사실, 마우스를 따라 툴팁 번째 있도록 툴팁과 mousemove 핸들러를 숨기기 위해 mouseleave 핸들러를 사용 ...

댓글 올리기.

각 polygon 및 path에는 데이터 속성을 추가하십시오. 마찬가지로, 예를 들면 :

<path id="area 01" data-tooltip-left="33" data-tooltip-top="22" data-info="<div>Area 01:</div><div>More Info about area</div>" fill="#D3D3D3" d="M90.5,72.5v12l7,1v12h20l3-27C120.5,70.5,108,77,90.5,72.5z"/> 

은 다음과 같이 당신의 hover 핸들러를 수정

var timeout; 
$("path, polygon").hover(
    function() { 
    clearTimeout(timeout); 
    console.log($(this)[0].tagName); 
    $('#info-box').css({ 
     'display':'block', 
     'position':'fixed', 
     'top':$(this).offset().top + parseInt($(this).data("tooltip-top")), // 22px added 
     'left':$(this).offset().left + parseInt($(this).data("tooltip-left")) // 33px added 
    }); 
    $('#info-box').html($(this).data('info')); 
    }, 
    function(){ 
    timeout = setTimeout(function(){ 
     $('#info-box').css('display','none'); 
    },1000); 
    }); 

timeout 변수는 마우스 툴팁을 가로 질러 오면 바로 드리블 효과를 방지하는 것입니다.

.hover() 처리기의 첫 번째 기능은 mouseenter입니다. 두 번째 것은 mouseleave 작업입니다.

사항은 타임 아웃이 "드리블을 방지하기 위해 mouseenter에.

을 지금에 대해" "장애인"또는 resetted하는 MouseLeave에서만 인스턴스화 ... 그리고는 "중심 ... 당신의 다각형이 불규칙한 모양 가지고 있기 때문에, 이 어려운하지만 데이터를 사용하여 수행 할 수있는 무언가가있다 ... 모양으로, 모양 속성 수

이

귀하의 재미가 시작
,...)

Updated Fiddle (즉 중심으로 측면하지 않고)

Last Fiddle

EDIT (센터링 솔루션을 ... "지역 06"찾기)
거기에 "조정"측면 ...이었다 그리고 SVG의 크기는 선형 툴팁에 좋아하지 않습니다 크기. 그걸로 싸우는 동안, 나는 어리석은 도청의 모든 시간을 도청 어색해서, 그래서 내가 계속이 CodePen에 계속 ...