JavaScript: l'événement onmouseout ne fonctionne pas après onmouseover - javascript

J'essaie d'écrire du code pour une info-bulle, où lorsque la souris passe dessus, le texte s'affiche et quand il s'éloigne, il disparaît. J'essaie de le faire en changeant de classe (tipHide en css a display:none, et tipShow a display: block), mais le onmouseout l 'événement ne change pas la classe (ce que je sais en voyant la source générée après).

Comment puis-je le réparer pour que le onmouseout l'événement se déclenchera si le onmouseover L'événement a déjà changé la classe.

Mon HTML:

<div id="zha" class="cfield">
<p id="qmark"></p>
<p id="toolTip" class="tipHide">Text Shown</p>
</div>

et JavaScript:

function toolTip() {
document.getElementById("qmark").onmouseover = function() {
var toolTip = document.getElementById("toolTip");
toolTip.className = "tipShow";
}
document.getElementById("qmark").onmouseout = function() {
var toolTip = document.getElementById("toolTip");
toolTip.classname = "tipHide";
}
}

J'aimerais aussi le faire sans utiliser JQuery

Réponses:

Peut-être une faute de frappe sur le className propriété? Dans ton onmouseout Tu as ça:

toolTip.classname = "tipHide";

Ce qui devrait être (le même que vous avez fait sur onmouseover):

toolTip.className = "tipHide";
^