ワールドマップ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"); 

} 

は、次の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; 
} 

だけSVG要素の前に、あなたのHTMLに次の要素を追加します。あなたはあなたの仕事に基づいてツールチップの内容を制御することができます。マウスの上で手動で内側のhtmlを変更することで動的に行うことができます。

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