JavaScript: събитие onmouseout не работи след onmouseover - javascript

Опитвам се да напиша код за ToolTip, където когато мишката преминава над него, текстът показва, а когато се отдалечава, той се разминава. Опитвам се да го направя чрез промяна на класове (tipHide в css има display:none, и tipShow има display: block), но onmouseout събитието не променя обратно класа (което знам, че виждам генерирания източник след).

Как мога да го поправя така onmouseout събитието ще се задейства, ако onmouseover събитието вече е променило класа.

Моят HTML:

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

и 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";
}
}

Също така бих искал да го правя, без да използвам JQuery

Отговори:

Може би печатна грешка на className Имот? Във вашия onmouseout ще се справиш:

toolTip.classname = "tipHide";

Което трябва да бъде (същото, както и ти onmouseover):

toolTip.className = "tipHide";
^