Discussion :

[JeanPPPP]

Bonjour,

Je suis en difficulté pour mettre en place une infobulle sur des path.

Je souhaiterais que lorsque la souris survole chaque path de mon SVG elle puisse afficher une infobulle qui le décrit.

J'ai essayé de mettre en place des méthodes déja proposées, seulement cela n'a pas conclu.

Voici le code de mon SVG :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
<svg viewBox="0 0 750 590" xmlns="http://www.w3.org/2000/svg" version="1.1" id="Map">
            <defs id="conteneur" />
            <g id="metropole" transform="translate(115.25424 5.084746)">
                <a xlink:title="Grand Est">
                    <path id="R44" d="M555.544 136.717l-4.446-1.406-1.715-1.533-3.117-.846-1.773-1.913-.585 1.023-1.3-.442-.917.959-2.997-2.034-2.445 1.402-.121-.814-2.44.758-1.673-.632-.071-1.156-4.297-1.53-1.415-4.511-2.425.272.378-1.209-3.317.779-.1 1.778-1.507-.019-1.341 1.81-1.993-.949-2.009.93-.564-.955-1.112.62-1.313-1.366-.889.177-.199-1.051-.768.468.282 1.177-1.49.987-.723-4.861-.909.203-1.606-1.413-.548.444-.889-1.274-1.885.862-1.357-.862-.922.64.996 2.021-1.104 1.753-2.309-.981-1.706.278-1.125-1.462.506-1.964-1.179.152-.262-2.137-1.191-.583.382-1.339-2.324-1.371-1.951-2.883 1.398-1.188-2.536-2.328.718-1.126-.61-.776-4.795-2.834-1.395.796-1.079-.414-.108.701-1.254-.478-3.91-2.97-3.504.631.179.746-1.37-.044-1.121 2.522-1.781-.84-.644 1.216-2.562-.255-.568-2.669-4.048-.344-1.387-1.441.083-1.358-.822.351-1.847-1.659-1.121 1.544-4.301-.714-1.287 2.729-2.275-1.447-3.482 2.046-1.794-6.259-3.384-2.229-1.411 1.259-.319-1.169 1.046-1.566-2.582-2.719-1.097.717-3.184-.512-.17-1.434-1.449.147-1.378-3.165-3.554-1.237-.549-1.154-3.715.917-2.259-.462.959-1.713-1.15-3.023 1.707-2.75-1.698-2.489-2.342-.637-.058-.682 2.142-4.464-.876-1.734.748-.142.539-2.219.868.877-.179-2.046 1.188-1.098-2.886-2.048-5.525 5.379-.037 5.75-3.928.567-3.043 2.324-3.246.849-5.663-2.046-3.233.676v0l-.599 2.895 1.578.636-.096 2.288-1.959 5.667 1.818 1.474-2.687 3.714-2.445 1.344-.465 2.878-3.076-.301-.727 1.01 2.259 3.251-1.167 1.679 1.088.191.137 1.11-1.573 1.128.033 2.498 1.092 1.414-1.271.458-.058 4.975-3.205-1.093-1.482-1.864-2.835 1.686-.183 2.25-3.048-.73-5.505 2.719.852 2.837-.569.945 1.08 1.217-1.005 1.395 1.175 1.001.689-.627.668 1.907 1.42-.272-.029 1.405-1.806 1.051-.78-.747-2.661.234-.889 1.949 1.549 2.681-2.126 1.068-.074 1.472 2.719-.392 1.125 1.824-1.511.631-.852 2.391-1.282.385.544 1.084-1.221.227-.142 1.556-1.76.164-1.773 3.764v0l.071 2.402-3.471.327 1.577.352.083.798-1.437.402-.602 1.602 3.067 1.268.35 2.491-1.528 2.163.81.696-.349 1.09 3.458-.702-.589.846 1.631 1.021-2.407.732.515.933-2.043 1.208.669 1.807-3.093.856 1.308 2.337-2.267.674.938 1.654-.585 1.785 1.271.574-.312 1.596v0l.577 1.975 1.594-1.109 1.549.61 1.665 2.927 1.802 1.182-.403 1.033 1.723.952-.755 2.25.854.435-1.752 2.546 2.135-.329 1.531 3.097 2.309-.999-.349-1.124 1.411.528-.361 2.066 2.143.911 1.287 4.566 2.059 1.807-.05.773-1.308-.093.523 1.293 1.175.266.606-1.41.78 1.349-.776 3.115 3.794-.068.76-.754 1.669 1.075.644-1.273 1.221.049.855 1.174 1.852-1.798v0l.519-.278v0l1.461 1.119.433-1.261-.743-.346 1.308-.284-.175 1.409.938 1.18 1.993.315.9-2.249 9.976-.414-.776-2.387 1.773-1.398 3.799.94 1.241-.619 1.557 1.182 2.308-.068.669 1.07-1.018 1.62 2.528.111.818 1.248-1.403 1.952 1.204.766.365-1.321 1.403-.204 1.553 3.364v0h.543v0l1.607 3.626-3.181 2.519 1.794.314.406 4.683 2.5-1.5.028 1.119 1.32-.178-.303 1.66 1.083-.19 1.565 1.53 2.528-2.077-.203 1.727 2.689 2.199.864-.356-.872 1.584.66 1.221 2.814-2.209 1.366 1.313 2.689-5.294 1.757.301.854-.738 1.773.67 1.743-2.121 1.217 2.17 3.897-.774-.257-2.313 1.009-1.501-.133-1.293-1.229-.702.618-2.563 2.101.05.797-2.436 2.782.45.834-3.221 1.507.271-.013-1.543 2.043-3.226 1.129.575-1.332 1.86.9.136.889-1.316 1.315.043 1.541-2.906 3.96-.984v0l.1.074v0l1.113 2.53-.656.674 2.441 1.18-.142.624v.321l3.454-1.464 4.227-.303 1.918 1.168 1.78 3.464 2.707-1.081.835-1.828 1.806-.76 1.615 2.545 5.799 3.301 1.549 2.195.734-.308 1.03 2.298 6.202 2.438 1.365 3.746-1.78 4.896.635.829.863-.724 1.856.467 2.366 4.183-.437 1.33v0l2.877.545-1.319 3.073 2.586.282.452 1.101 3.546-1.224 2.399.557 2.869-2.375-1.437-.576.432-.906 2.379.79.938-.962-.564-1.372 1.038.361.336-.809-1.308-.711 3.496-2.214.345-1.768-2.836-3.482-.481-2.225 1.511-2.233-.755-2.808 1.345-3.821-.229-2.332 2.728-5.744-2.191-3.854.303-5.353 3.724-6.281 1.104-4.986 2.143-1.581-.511-4.186 1.49-5.978 1.561-1.531-.245-4.339 1.619-3.569 5.182-5.078.328-2.209 1.818-.201.581-1.602 2.479-1.037 2.474-6.417 3.259-4.418z" />
                </a>
                <a xlink:title="Nouvelle Aquitaine">
                    <path id="R75" d="M162.747 319.131l.988.399.07 3.279 2.026 2.617.046 1.492-.893.576.527 1.259-1.486 1.74-1.578-4.829-4.891-4.336-1.1-5.57 1.777.483 2.279 2.675zm-11.301-12.627l2.981-.006 5.787 3.382 1.818.096 1.133-1.123-.914.191-.793-1.679-3.047-1.273-2.487.449-.589-.735 1.104-.993-1.872.132-1.693.932-.893-1.021 1.947-.204-.996-1.448-2.599.736.183.778zm158.342-13.06l.291 2.298 1.935.552-1.316 1.739 2.604 1.966.946-1.264 1.407 2.899.419-.779 2.105.952 1.81 5.552 1.661 1.906-.652 4.137.893 2.314 1.25.733-.361 2.61.768 1.144-1.951.911-.834 1.452.507 1.106-2.346 1.611-.315 1.343-1.313-.178v0l-.187.042v0l-1.084 1.883-1.153-.244-.586.79 2.283 3.935 1.723.611 1.607 2.288-.079 4.027-1.479.083-1.033 2.645 1.162 2.081 1.18.396-1.254 7.974 1.689 1.597-1.988 1.302-3.891-2.457-1.59-.012.839 1.45-.369 2.985-1.811.889-1.121 1.959-.83-.171-1.184 2.505-1.942 1.598.286 2.366 1.304.933-2.188 1.667-.274 3.225-1.241-.252-1.847 1.553 1.843 3.425-1.383 1.153v0l-.344-.088v0l-1.657.427v0l-3.122.099-1.578 1.281-.307-1.216-1.341-.263-4.396 3.209-2.138-.847-.029-1.14-1.797-.737-.972-2.042-2.15-1.668-2.329-.509-1.229.679-.423-1.007-5.21 2.464v0l.174.69v0l1.167 4.49-1.195.351 1.158 1.863-3.247 2.083.174 1.896-2.811.88-.033 1.172 1.038.653-.278 1.421-.693-.198-.498 1.596-.714-.361-1.918 2.253-3.13.797.245 1.803-2.454 2.639.398 1.167-2.462.668-1.233 1.44-1.395-.406 1.47 2.158.021 3.549 1.569 1.043.237 3.532-4.546.231-.436.954-.872-2.245-1.005.168-1.121 4.102 1 .821.938-.376 1.437 1.612-.926.439-.901 4.382-2.213.375.257.756 1.071-.236.361 2.14-1.329.651-3.026-.98.365 1.873-1.723.213-.731 2.633-3.167 2.146-2.939-3.224-1.536 1.451-3.94-.052-.776 1.571-2.557 1.3-2.752-.172-.59 1.081-2.964-1.145.075-.656-1.627.403-1.461 2.427-1.233-1.656-2.956 2.322.851 2.568-.71 1.183-3.321-1.889 1.154-1.431-1.785-1.742-.386 1.334-1.997.753-.087 1.12-1.266-.851-1.378.885-.83-.654-2.491 2.395 2.212 1.676-.921.608.627 2.735-1.375.104.328 3.312.997.75-2.292 1.724.32 3.003-.88.138.017.914-.789-.377.091 1.406 1.337.148.361 1.891 2.553-.782.689.908 2.657-.092.116 2.204 1.134-.269 1.083 2.031-.407 1.181 1.312 1.123-1.972.513-.22 1.59.847.929-.685.455 1.013.035 1.748-2-.12 4.157 1.382 1.484-.81 1.189-1.528-.217-.813 1.581 1.2 1.756-1.329 2.953-.988-.244.22 2.61-1.59.59-.465-.76-1.191 2.897-1.951.833-.245 2.679.785.855-3.354.826.054 1.284-1.188.516.278 4.03-1.922.943.585 3.833v0l-3.383 2.849-1.997.197-2.636-1.799-1.901 2.785-5.248-6.035-2.229-.667.087-2.756-1.004-1.283-2.259.955-4.035-.712-1.565.588-7.095-4.004-1.158.905-.888-1.545-2.699-1.132-1.399.662-1.93-1.409 1.585-2.827-3.043 1.354-.402 3.742-3.575-1.002-1.374-2.384 2.441-2.227 1.345-3.487-.27-3.9-6.078-2.04-1.146.318-.564 2.193-1.329-.131-.664-3.125-1.868-.472-2.491 1.074-.341-1.938-2.051-1.161.689-.819-.764-.506 4.6-1.355.432.507 2.794-2.551 6.381-12.241 6.21-32.324 1.657-19.24 2.615-6.665 1.781-.244.423 1.227 4.338-.331 1.328.681-.568-2.49-2.143-1.013 1.482-.023-5.538-4.619-.262 1.771-2.449 3.034-.585 4.548-.631-1.035 4.126-38.941.216-10.452 2.59-4.771 1.391-1.022.876 2.21-.557.348-.556 1.099 5.588 4.219 5.306 5.539 4.791 15.184 3.392 4.281 1.017-.07-3.466-6.386-2.039-11.926-2.798-7.825-5.467-5.23-2.3-.656-2.221-3.678-3.147-1.03-4.409-3.345-.836.176.807 1.245-.618.029-.615-1.202-.062-5.543 4.301-1.003-1.876-2.993 2.64-.338 1.657-2.901-.091-1.731-.05-.744-.22-1.768-.473-.815 1.785-.59-2.034-5.503-1.731-.687.585-1.224-1.872-.645.984-1.153-2.358.705-1.295-1.1 1.378-1.303.17-1.566 3.741-2.889-.955-2.545.751-.851v0l1.702-.042.884-1.954 3.28-.102 1.864-1.169-1.312 2.907 1.233.743 1.855-.995 1.515.563.785-1.48v0l.183.258v0l1.154-.264-.116 1.031 3.342 1.354 1-1.396 2.088.509.365-1.282 1.395-.42.179-.881 1.739.018.813-1.523-2.765-1.74-.614 1.344-.868-.378.153-2.065 1.208-1.381-1.627-3.937 1.814-.716-.972-2.588.54-2.782-1.777-.88.896-1.634-1.772-1.381.971-.838-2.645-3.333.096-2.248v0l-.038-.248v0l.831-.768-1.092-.707v0h-.295v0l-1.648-1.107v0h-.174v0l-2.309-2.717.959-2.187-2.146-.812.477-.661-1.258-.036.61-.982-.556.346-.793-1.109 1.806.285.382-1.213 1.44.151.876-1.098 3.018 1.298 1.482-.224.353-.947 2.96.382 2.292-2.161-.527-1.919 2.558-1.179 1.457.115-.901 1.713.951-.942 2.105.134.457-1.489 2.337.261 3.097-1.143 2.536.699.847-.857 1.719.298-1.516 2.024 2.068.978 1.125-.62.66-2.212 2.08.863-.17-1.666 1.382-2.817 1.1-.913 1.482.669v0l1.046 1.102.042 1.625 2.487-.359-.22 1.083 1.133.383.818-.863.76 1.435-.896 1.981 1.44.31 1.333-1.063.909.243.046 1.512 1.444-.522.395 3.211-.884.485 1.337 3.632 1.727-1.14 3.039 1.212 2.786-1.782 3.844.103-1.262-2.972 2.067-.085.677 1.304 2.391.746.531 4.273 1.989 2.64 1.818.605.785 3.659 4.052 3.763.602 1.979-.972.875.519 1.755-1.004 1.271.751 1.699 2.201 1.8 2.104.253.229 1.854 3.031-.024 2.138 1.762.266 3.521 1.544.457-.199.763 1.2-.324-.644 1.915v0l-.76 1.014v0l.507.498.785-.81.386 1.458 1.669-.744 1.86.402.403-1.404 1.694-.294 2.545 3.221 4.596-4.835.785 2.046 2.682-1.729.793 1.999 2.366-1.824 1.802 1.692 1.287-2.107-.519-1.495 1.474-.372 2.325 1.85 1.901-.961 1.955.63 1.947-.708 4.55 1.981 4.484-1.104z" />
                </a>
....

Ainsi, je voudrais que lorsque je passe sur le <a> attitré à chaque path cela me propose le tooltip.

J’espère que vous pourrez m'aider à résoudre ce problème.

[NoSmoking]

Bonjour,

J'ai essayé de mettre en place des méthodes déja proposées, seulement cela n'a pas conclu.

Cela n'aide pas franchement pour savoir vers quoi t'orienter !

je voudrais que lorsque je passe sur le <a> attitré à chaque path cela me propose le tooltip

Plusieurs réponses possible, avec CSS uniquement ou pas suivant le besoin.

Donc il faudrait préciser :

• affichage à un endroit fixe du <svg> ;
• affichage statique sur le <path> ;
• affichage suivant position de la mouse.

[JeanPPPP]

Bonjour,

En effet j'aurais dû préciser la méthode testée.
La voici : https://codepen.io/kvyb/pen/eWwyzQ

Concernant l'utilisation unique du CSS, j'aimerais privilégier cette méthode, mais je pensais uniquement pouvoir le faire via JavaScript.

Ainsi, j'avais pour idée de mettre en place un affichage de l'infobulle lorsque la souris entre dans le "<path>". Par cela, j'entends que lors de l'entrée de la souris le tooltip s'affiche et suit le mouvement du curseur de la souris. Cependant dès que la souris passe sur un autre "<path>" avec un "xtitle" différents alors elle affiche ce dernier en remplacement de l'autre.

J’espère que cela rend plus claire ma volonté.

[NoSmoking]

Concernant l'utilisation unique du CSS, j'aimerais privilégier cette méthode

tu ne peux utiliser le CSS que si l'affichage reste en position statique ce qui est très souvent suffisant et parfois moins « soulant »

Par cela, j'entends que lors de l'entrée de la souris le tooltip s'affiche et suit le mouvement du curseur de la souris.

La source que tu as trouvé fait bien le job.

Cependant dès que la souris passe sur un autre "<path>" avec un "xtitle" différents alors elle affiche ce dernier en remplacement de l'autre.

C'est le principe mais dans ton cas l'usage de balise <a xlink:title=""> n'est pas justifié et de plus détournée de son originale utilisation, c'est pour cette raison que la plupart du temps on récupère l'id de l'élément ou l'attribut data-xxx ou les données dans un tableau de relation, bien des méthodes peuvent être misent en place et dépendantes du but à atteindre.

Je te propose, une proposition de plus donc, à et ce à partir d'une structure simple

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
<svg>
  <path id="R_84" data-name="Auvergne-Rhône-Alpes" d=".."></path>
</svg>

de regarder cet exemple en ligne : Info-Bulle sur SVG

Le script se résume à :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
function SVGToolTip() {
  const oSVG = document.querySelector("svg");
  // création et ajout élément
  const oInfo = document.createElement("DIV");
  oInfo.id = "info-SVG";
  oSVG.parentNode.append(oInfo);
 
  function _toggleInfo(e) {
    oInfo.innerHTML = "mouseenter" === e.type ? "<h1>" + e.target.dataset.name + "</h1>" : "";
  }
 
  function _moveInfo(e) {
    oInfo.style.transform = "translate3d(" + e.layerX + "px," + e.layerY + "px, 0)";
  }
 
  // mouse move sur SVG
  oSVG.addEventListener("mousemove", _moveInfo, true);
  // mouse enter/leave sur PATH
  const oElems = document.querySelectorAll("path");
  oElems.forEach(function (elem) {
    elem.addEventListener("mouseenter", _toggleInfo);
    elem.addEventListener("mouseleave", _toggleInfo);
  });
}
// activation
SVGToolTip();

le reste n'étant que CSS comme souvent.

[JeanPPPP]

Merci ! C'est exactement ce dont j'avais besoin.

[dev14]

Tes explications m'ont également aidé, merci NoSmoking.