세계지도 svg에 툴팁을 추가하려면 어떻게해야합니까

Question

저는 전 세계 모든 국가의 SVG를 보유하고 있으며, 나라 위에 푸른 색으로 강조 표시된 국가를 가리킬 때마다 툴팁을 추가하고 싶습니다. 해당 툴팁에는 이름 목록이 포함됩니다. 이것을 어떻게 할 수 있습니까? https://www.w3schools.com/css/css_tooltip.asp

이는 SVG지도입니다 :

내가 여기서 설명된다 찾고 있어요 여기 페이지 상단에있는 텍스트 "최고"위로 마우스를 이동하는 것은 http://occ.uk.com/occ/associate-members/

이 코드입니다 지도 : https://www.dropbox.com/s/ofm2io1ahv2k7gh/SVGWorldMapSharing.html?dl=0

어떤 도움을 주셔서 감사합니다.

Answer 1

코드는 https://codepen.io/anon/pen/WdjJzz

이 SVG 요소에 아래 onmouseevent 처리기를 추가로 볼 수 있습니다; 즉 handleMouseMove = "으로 onMouseMove (이벤트)"

function handleMouseMove(event) { 
    var countryId = event.target.id; 
    var tooltip = document.getElementById("tooltip"); 

    switch (countryId) { 
    case "AT": 
    case "FR": 
    case "DE": 
    case "IT": 
    case "NL": 
    case "AU": 
    case "IL": 
     break; 
    default: 
     return tooltip.classList.remove("active"); 
    } 

    var x = event.clientX; 
    var y = event.clientY; 

    tooltip.style.left = (x + 20) + "px"; 
    tooltip.style.top = (y - 20) + "px"; 
    tooltip.innerHTML = countryId; 
    tooltip.classList.add("active"); 

} 

그냥 SVG 요소하기 전에, 당신의 HTML에 다음과 같은 요소를 추가 다음과 같은 CSS를

.tooltiptext { 
    display: none; 
    width: 120px; 
    background-color: black; 
    color: #fff; 
    text-align: center; 
    border-radius: 6px; 
    position: fixed; 
    z-index: 1; 
} 

.tooltiptext.active { 
    display: initial; 
} 

를 사용합니다. 당신은 툴팁 내용을 당신의 작업에 기반하여 제어 할 수 있으며, 마우스를 가지고 수동으로 내부 html을 변경함으로써 동적으로 할 수 있습니다.

<span class="tooltiptext" id="tooltip">Tooltip text</span>