Afficher div sous le curseur en mouseover d'un path SVG
Bonjour,
Je cherche à afficher un "tooltip" lorsque la souris passe sur des éléments path de SVG.
Voici le code utilisé, qui n'affiche pas le tooltip (le SVG est ok):
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
| var balisePath = document.createElementNS('http://www.w3.org/2000/svg', 'path');
balisePath.setAttribute('fill', formes[i].getCouleur());
balisePath.setAttribute('d', formes[i].toSvgPath());
balisePath.onmouseover = function(e) {
this.setAttribute('stroke', "red");
this.setAttribute('stroke-width', 3);
var divMouseOver = document.createElement('div');
//divMouseOver.setAttribute('position', 'absolute');
divMouseOver.setAttribute('top', e.clientY + "px");
divMouseOver.setAttribute('left', e.clientY + "px");
divMouseOver.setAttribute('z-index', '10');
divMouseOver.innerHTML = 'truc';
this.appendChild(divMouseOver);
};
balisePath.onmouseout = function(e) {
this.removeAttribute('stroke');
this.removeAttribute('stroke-width');
};
baliseSvg.appendChild(balisePath); |
Je ne vois pas bien ce qu'il manque. Merci de votre aide.
