Bonjour,
En suivant ce tutoriel :
https://www.petercollingridge.co.uk/...ctive/tooltip/
Je dois normalement utiliser ECMAScript.
Dans mon SVG :
Ajouter onload="init(evt)" dans l'élément SVG pour appeler la fonction init ().
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 <script type="text/ecmascript"> <![CDATA[ function init(evt) { if ( window.svgDocument == null ) { // Define SGV svgDocument = evt.target.ownerDocument; } tooltip = svgDocument.getElementById('tooltip'); } function ShowTooltip(evt) { // Put tooltip in the right position, change the text and make it visible tooltip.setAttributeNS(null,"x",evt.clientX+10); tooltip.setAttributeNS(null,"y",evt.clientY+30); tooltip.firstChild.data = evt.target.getAttributeNS(null,"mouseovertext"); tooltip.setAttributeNS(null,"visibility","visible"); } function HideTooltip(evt) { tooltip.setAttributeNS(null,"visibility","hidden"); } ]]></script>
Ensuite, à la fin du SVG, ajouter le texte de l'infobulle :
Enfin, à chacun des éléments auxquels je souhaite ajouter la fonction de survol de la souris :
Code html : Sélectionner tout - Visualiser dans une fenêtre à part <text id="tooltip" x="0" y="0" visibility="hidden">Tooltip</text>
Je suppose que c'est dû au fait que je réutilise plusieurs fois mon image SVG, mais je ne comprends pas comment le mettre en place.
Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3 onmousemove="ShowTooltip(evt)" onmouseout="HideTooltip(evt)" mouseovertext="Whatever text you want to show"
Pourriez-vous m'aider SVP ?
Partager