Solution sans JavaScript

Cela utilise CSS pseudo flottant pour définir l'affichage de l'élément caché. L'affichage ne doit pas être dans le style et non sur l'élément afin qu'il puisse être écrasé dans le vol stationnaire.

HTML:

 <div class="couponcode">First Link <span class="coupontooltip">Content 1</span> <!-- UPDATED --> </div> <div class="couponcode">Second Link <span class="coupontooltip"> Content 2</span> <!-- UPDATED --> </div> 

CSS:

 .couponcode:hover .coupontooltip { /* NEW */ display: block; } .coupontooltip { display: none; /* NEW */ background: #C8C8C8; margin-left: 28px; padding: 10px; position: absolute; z-index: 1000; width:200px; height:100px; } .couponcode { margin:100px; } 

Exemple:

JsFiddle

Suivre:

Si vous devez supporter des navigateurs vraiment anciens, vous devriez ajouter une classe à l'élément externe lorsque la souris entre dans la division. Et retirez cette classe lorsque la souris part.

MODIFIER

Votre code n'a pas fonctionné, car qu'est-ce que c'est tp? Est-ce une collection d'éléments et vous le considérez comme un seul. Ce que vous devriez faire, c'est passer la référence à l'élément

HTML:

 <div class = "name" onmouseover="show(this)" onmouseout="hide(this)"> <!-- added "this" 2 times --> 

** JavaScript:

 //var name = document.getElementsByclassName("name"); /* not needed */ // var tp = document.getElementsByclassName("tooltip"); /* not needed */ function show (elem) { /* added argument */ elem.style.display="block"; /* changed variable to argument */ } function hide (elem) { /* added argument */ elem.style.display=""; /* changed variable to argument */ } 

Correction du code original

Je cherchais quelque chose comme ça, et je suis tombé sur cette page. Cela m'a aidé, mais j'ai dû corriger votre code, pour qu'il fonctionne. Je pense que c'est ce que vous avez essayé. Vous devez référencer vos objets par leur «ID». Voici ce que j'ai fait, et cela fonctionne:

HTML

 <div class = "name" onmouseover="show(tooltip1)" onmouseout="hide(tooltip1)"> NAME <div class = "tooltip" id= "tooltip1"> PROFILE DETAILS </div> </div> <div class = "name" onmouseover="show(tooltip2)" onmouseout="hide(tooltip2)"> NAME 2 <div class = "tooltip" id= "tooltip2"> PROFILE DETAILS 2 </div> </div> <div class = "name" onmouseover="show(tooltip3)" onmouseout="hide(tooltip3)"> NAME 3 <div class = "tooltip" id= "tooltip3"> PROFILE DETAILS 3 </div> </div> 

CSS

 .name{ float:left; margin:100px; border:1px solid black; } .tooltip{ position:absolute; margin:5px; width:200px; height:50px; border:1px solid black; display:none; } 

JS

 function show (elem) { elem.style.display="block"; } function hide (elem) { elem.style.display=""; } 

http://jsfiddle.net/5qbP3/28/

Même pour $ (document) .ready, il est difficile à accomplir dans JS pur – voir ici: $ (document). Jj équivalent sans jQuery

J'utilise donc une version simple:

 window.addEventListener("load", function () { var couponcodes = document.getElementsByClassName("couponcode"); for (var i = 0; i < couponcodes.length; i++) { couponcodes[i].addEventListener("mouseover", function () { var coupontooltip = this.getElementsByClassName("coupontooltip")[0]; coupontooltip.removeAttribute("style"); }); couponcodes[i].addEventListener("mouseout", function () { var coupontooltip = this.getElementsByClassName("coupontooltip")[0]; coupontooltip.style.display = "none"; }); } }); 

http://jsfiddle.net/mynetx/5qbP3/

Pour une info-bulle non personnalisée, vous pouvez simplement ajouter le message que vous souhaitez afficher dans l'info-bulle dans l'attribut titre de la div principale. Juste comme ça:

 <div class = "name" onmouseover="show()" onmouseout="hide()" title="PROFILE DETAILS"> 

Ensuite, il n'est pas nécessaire d'ajouter les gestionnaires d'événement onmouseover et onmouseout .

Si vous êtes intéressé par une option simple et robuste, ajoutez ces quelques lignes de JavaScript à la fin de votre page:

 (function(){ var stylesheet1 = document.createElement('style'); stylesheet1.innerHTML = 'mb-tooltip {display: none;position: fixed;}[data-mb-tooltip]:hover + mb-tooltip {display: block;}'; document.head.appendChild(stylesheet1); var stylesheet2 = document.createElement('style'); document.head.appendChild(stylesheet2); var tooltipList = document.querySelectorAll('[data-mb-tooltip]'); for(var i = 0; i < tooltipList.length; i++){ var tooltipContainer = document.createElement('mb-tooltip'); tooltipContainer.innerHTML = tooltipList[i].getAttribute('data-mb-tooltip'); tooltipList[i].parentNode.insertBefore(tooltipContainer, tooltipList[i].nextSibling); } window.addEventListener('mousemove', function(e){ stylesheet2.innerHTML = 'mb-tooltip { top: ' + (e.clientY + 18) +'px; left: ' + e.clientX +'px}' }); })(); 

Ensuite, ajoutez un data-mb-tooltip="your text" à l'élément que vous souhaitez afficher la info-bulle lorsque vous le déplacez.

Ensuite, vous pouvez personnaliser la info-bulle, mais vous souhaitez utiliser la mb-tooltip dans votre CSS (par exemple, mb-tooltip {border:solid gray 1px;} )

PS Vous pouvez également mettre le HTML dans le mb-tooltip attr.