CODEWITHSUNDEEP
javascript
cfleming93
cfleming93

Reputation: 219

JavaScript: onmouseout event not working after onmouseover

I'm trying to write code for a ToolTip, where when the mouse goes over it the text shows, and when it moves away it goes away. I'm trying to do it by changing classes (tipHide in css has display:none, and tipShow has display: block), but the onmouseout event doesn't change the class back (which I know from seeing the generated source after).

How can I fix it so the onmouseout event will trigger if the onmouseover event already has changed the class.

My HTML:

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

and 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';
    }
}

Also I'd like to do it without using JQuery

Upvotes: 0

Views: 172

Answers (1)

DontVoteMeDown
DontVoteMeDown

Reputation: 21465

Maybe a typo on the className property? In your onmouseout you got this:

toolTip.classname = 'tipHide';

Which should be(the same you did on onmouseover):

toolTip.className = 'tipHide';
             ^

Upvotes: 4

Related Questions