5568 sujets

Sémantique web et HTML

Tooltip sur une image svg

Bonjour, j'ai un problème au niveau de mon code.
J'ai une image svg avec les coordonnées des zones où je souhaiterai créer un tooltip qui apparaitrait lors d'un survol.

Voici mon code : 


<svg>
<g fill="#f9f9f9">
                    <a xlink:href="#tooltip">
                        <rect x="98.753" y="738.66" width="61.115" height="67.682" opacity=".02" stroke-width=".99407"/>    
                    </a>
                 
                    <a href="">
                        <rect x="739.39" y="533.28" width="61.115" height="67.682" opacity=".02" stroke-width=".99407"/>
                    </a>
</g>
</svg>
 
<div id="tooltip">
                        <div id="tooltipText">
                            <h1>Titre</h1>
                            <br>
                            <p>Description 1
                                <br>
                                Description 2
                            </p>
                        </div>
                         
</div>




#tooltipText{
    position: absolute;
    transform: translateX(-50%);
    background: white;
    box-shadow: 0 10px 10px rgba(0, 0, 0, 0.1);
    border-radius: 5px;
    padding: 25px 35px;
    visibility: hidden;
    opacity: 0;
    transition: 0.5s ease-in-out;
}
#tooltipText::before{
    content: "";
    position: absolute;
    left: 50%;
    top: 94%;
    height: 20px;
    width: 20px;
    background: rgb(255, 255, 255);
    transform: translateX(-50%) rotate(45deg);
     
}
a:hover #tooltipText{
    top: -130%;
    visibility: visible;
    opacity: 1;
}
Modérateur
Salut,

Et quel est ton problème ?

Si tes tooltips sont en dehors du SVG comme sur ton exemple il va falloir passer par du Javascript a mon avis.
Sinon tu peux mettre chaque tooltip dans le SVG a coté de la forme dans un meme conteneur et au survol de ce conteneur tu fais apparaitre la tooltip qui est dedans en CSS.
Modérateur
Salut,

Il faudrait que tu mette un <g> avec dedans ta tooltip et le rect. Et dans le CSS tu n'affiche pas le texte. Au survol du g là tu fait apparaitre ta tooltip. Tente le coup et reviens avec un bout de code sur codepen ou jsfiddle Smiley smile 

<g fill="#f9f9f9">


                                <g id="myicon" cursor:="pointer" pointer-events="all">
                                    <rect class="tooltip" x="98.753" y="738.66" width="61.115" height="67.682" opacity=".02" stroke-width=".99407"/>  
                                </g>
</g>

            <div id="mypopup">

                    <h1>Titre</h1>
                        <br>
                        <p>Description 1 
                        <br>
                        Description 2
                        </p>
                        
            </div>  




#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;
  }




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";
}


J'ai essayé avec ce code là mais ça n'affiche toujours rien
Modérateur
Salut,

Ton code marche bien. Cependant il te manque pas mal de chose au niveau du svg...

- la balise svg est ou ? Tu lui a donné une viewbox et une taille ?
- x="98.753" y="738.66" width="61.115" height="67.682" ca sort d'où ces nombres ? C'est un code généré ? Selon la viewbox de ton svg tu le verra peut etre pas...
- opacity=".02" tu va pas y voir grand chose du coup... c'est fait exprès ?
- stroke-width=".99407" la pareil, pourquoi pas 1 ? Et sans couleur avec stroke pas sur que tu le vois...
- pas besoin d'empiler 2 g au dessus du coup... tu peux te contenter de : 
<rect id="myicon" class="tooltip" x="50" y="50" width="20" height="20"/>

et gérer tout le reste en CSS
Sujet clos
Aller à