私は世界のすべての国の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
どんな助けでも大歓迎です、ありがとう。
コードはhttps://codepen.io/anon/pen/WdjJzzで入手できます。
以下のonmouseeventハンドラーをsvg要素に追加します。つまり、handleMouseMove = "onmousemove（event）"
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>
この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
コメントを追加