Discussion :

[garheb]

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 :

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
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.

[garheb]

A priori le css n'est pas modifiable avec setAttribute. Changé, ça fonctionne

[Bovino]

C'est surtout que setAttribute() sert à affecter un attribut (je crois même que c'est pour ça qu'on l'a appelé comme ça ) et qu'il n'existe pas d'attributs top, left ou z-index.

[garheb]

En effet, mon étourderie.