Comment afficher une info-bulle div lorsqu'un élément SVG est survolé

Question

Je demande un tableau SVG en ligne qui a une icône "plus d'informations" qui devrait déclencher une "info-bulle" en survol. Voir ci-joint. J'ai l'outil div stylé et est utilisé dans d'autres endroits, mais j'ai également besoin de déclencher sur l'icône d'information à l'intérieur du SVG.

Je sais que je ne peux pas ajouter l'info-bulle html dans SVG, alors quelles sont les autres options disponibles?

Le "graphique" est juste en ligne SVG pris directement à partir d'un programme graphique (Esquisse dans ce cas). Je n'utilise pas de frameworks ou de bibliothèques comme D3 ou chartjs. Veuillez ne pas suggérer d'utiliser une bibliothèque ou un framework car ce n'est pas une option.

similaires SO question, mais ils ne répondent pas à ma question: How to create an SVG "tooltip"-like box?

Answer 1

Il est assez simple. Cela nécessite juste quelques lignes de Javascript.

Lorsque nous passons la souris sur l'icône, nous positionnons la fenêtre contextuelle et l'affichons. Au passage, nous le cachons à nouveau.

Notez également le pointer-events="all" sur l'icône, ce qui garantit que la souris est considérée comme "sur" un élément d'icône, même pour les bits qui ont un remplissage invisible.

var myicon = document.getElementById("myicon"); 
 
var mypopup = document.getElementById("mypopup"); 
 

 
myicon.addEventListener("mouseover", showPopup); 
 
myicon.addEventListener("mouseout", hidePopup); 
 

 
function showPopup(evt) { 
 
    var iconPos = myicon.getBoundingClientRect(); 
 
    mypopup.style.left = (iconPos.right + 20) + "px"; 
 
    mypopup.style.top = (window.scrollY + iconPos.top - 60) + "px"; 
 
    mypopup.style.display = "block"; 
 
} 
 

 
function hidePopup(evt) { 
 
    mypopup.style.display = "none"; 
 
}

body { 
 
    background-color: #33333f; 
 
} 
 

 
#mypopup { 
 
    width: 400px; 
 
    padding: 20px; 
 
    font-family: Arial, sans-serif; 
 
    font-size: 10pt; 
 
    background-color: white; 
 
    border-radius: 6px; 
 
    position: absolute; 
 
    display: none; 
 
} 
 

 
#mypopup::before { 
 
    content: ""; 
 
    width: 12px; 
 
    height: 12px; 
 
    transform: rotate(45deg); 
 
    background-color: white; 
 
    position: absolute; 
 
    left: -6px; 
 
    top: 68px; 
 
}

<svg width="400" height="400"> 
 
    <g id="myicon" pointer-events="all"> 
 
    <circle cx="100" cy="150" r="14" fill="none" stroke="gold" stroke-width="2"/> 
 
    <circle cx="100" cy="144" r="2" fill="gold"/> 
 
    <rect x="98.5" y="148" width="3" height="10" fill="gold"/> 
 
    </g> 
 
</svg> 
 

 
<div id="mypopup"> 
 
    <h3>Popup title</h3> 
 
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> 
 
    <p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> 
 
</div>