Afficher un message au survol d'un élément

**colem** · 25/09/2019, 16h13

Bonjour à tous

Voici le problème que je rencontre
j'ai un tableau avec plusieurs choix, je souhaite qu'au survole, un message explicatif apparaisse.

Voici le tableau

Code HTML :

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

1
2
3
4
5
6
7
8
<td class="show" width="117">choix 1
    <div class="bulle" style="display: none;">explication 1</div>
</td><td class="show" width="117">choix 2
    <div class="bulle" style="display: none;">explication 2</div>
</td><td class="show" width="117">choix 3
    <div class="bulle" style="display: none;">explication 3</div>
</td>
....

et pour le code javascript, voilà ce que j'ai fait mais ca ne me plait pas

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
27
28
29
function detail(j, x) {
  var detail = document.getElementsByClassName("bulle");
  for(i = 0; i < detail.length; i++) {
      //console.log(i+"=="+j);
    if(i == j) {
      detail[i].style.display = x;
    }
  }
}
 
function event_detail(){
  var view = document.getElementsByClassName("show");
//alert(view.length)
  for(i = 0; i < view.length; i++) {
    let z = i;
    view[i].onmouseover = function() {
      //detail[z].style.display = "block";
      detail(z, 'block');
      this.style.backgroundColor='yellow'; 
    }
    view[i].onmouseout = function() {
      //detail[z].style.display = "none";
      detail(z, 'none');
      this.style.backgroundColor=''; 
    }
  }
}
 
window.addEventListener("load",event_detail,true);

Auriez-vous une autre idée