jQuery: temporarily disable hover… unintended side

Question

I've ran into a problem with .hover(). I want to temporarily disable it, which I've done, but it's had an unintended side effect that I want to get rid of.

The following is my fiddle: http://jsfiddle.net/sdPVG/7/

I am trying to disable the hover while the tooltip and dropdown menus are open (topTip and topDrop). These divs open upon clicking the red icon (topIconNew) and this widens the tooltip. Unfortunately, the tooltip stays permanently widened after it's been clicked. I want the div to return to it's normal (narrower) state though. Where have I went wrong?

Any and all help appreciated. Thanks!

Answer 1

You changed the size of the topTip div with an animation ... it needs to be set back to it's original size. Change your "// hide dropdown and tooltip on click outside" function to :

$(document).click(
    function(){
        hoverEnabled = true;
        $('div.topTip').animate({width:100,marginLeft:0},'fast');
        $('div.topTip, div.topDrop').hide();
    }
);

Answer 2

In the click handler you have forgotten to re-enable the hover.

See this fiddle

You also need to store the original width at the beginning of the script and restore the value for each tooltip div. JsFiddle updated.

Note that the other answers set the old width back by hardcoding the value "100px". This is already defined in your css and duplicating it is a bad programming practice. My solution reads the value at the beginning and re-uses it when needed, so if you change your css, you don't have to update your js.

Answer 3

You need to remove the width you've set when you expanded it.

In your $(document).click, make the following change:

$('div.topTip, div.topDrop').hide();

to

$('div.topTip, div.topDrop').hide().css('width', '');