Wie kann ich Tooltip auf der Weltkarte hinzufügen svg

Question

Ich habe ein SVG aller Länder der Welt und ich möchte einen Tooltip hinzufügen, wenn Sie den Mauszeiger über ein Land, das bereits blau über dem Land markiert ist. Dieser Tooltip enthält eine Liste mit Namen. Wie kann ich das erreichen?

Was ich suche hier gezeigt wird, schweben knapp über dem Text „Top“ am oberen Rand der Seite hier: https://www.w3schools.com/css/css_tooltip.asp

Dies ist der SVG Karte: http://occ.uk.com/occ/associate-members/

Dies ist der Code für die Karte: https://www.dropbox.com/s/ofm2io1ahv2k7gh/SVGWorldMapSharing.html?dl=0

Jede Hilfe wird sehr geschätzt, danke.

Answer 1

Der Code ist auf https://codepen.io/anon/pen/WdjJzz

den onmouseevent Handler unten an deinem svg Element hinzufügen; das heißt 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"); 

} 

Verwenden Sie die folgenden 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; 
} 

Fügen Sie das folgende Element, um Ihre HTML, kurz vor dem SVG-Element. Sie können den Tooltip-Inhalt basierend auf Ihrer Arbeit steuern, und Sie können das dynamisch tun, indem Sie den inneren HTML-Code manuell mit der Maus ändern.

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