CODEWITHSUNDEEP
jquery
egurb
egurb

Reputation: 1216

Canceling Fade Out Effect On A Tooltip Hover

I need a tooltip with hyperlinks inside for a web site. I wrote the code below and seems that it is working fine, expect one problem, once I hover the tooltip block it fades out and then fades in. I need to prevent fadeout when I hovet on it somehow. I tried to use the stop() method but it did not work, most probably I did something wrong :) Could you please help. Thanks.

HTML

<div id="hover">
    <div class="tooltip">

        <a href="#"></a>
        <a href="#"></a>
        <a href="#"></a>

    </div>
</div>

CSS

body{
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
}
#hover {
    position: relative;
    width:50px;
    height:50px;
    background: green;
}
.tooltip {
    position: relative;
    width: 45px;
    top: 80px;
    height: 20px;
    border: 1px solid black;
     padding: 5px;
}
a{
    display: inline-block;
    margin-top: 5px;
    height: 10px;
    width: 10px;
    border: 1px solid black;
    background: red;
}

JQuery

$(document).ready(function(){
    $(".tooltip").hide();

    $("#hover").hover(function(){
        $(this).find(".tooltip").fadeIn();
        },function(){
        $(this).find(".tooltip").delay(1000).fadeOut();
    });
});

The demo is here http://jsfiddle.net/8gC3D/2904/

Upvotes: 2

Views: 1913

Answers (2)

Nikos M.
Nikos M.

Reputation: 8345

Probably the problem is in the animation queue of jQuery try to use .stop method to clear the previous queue like this:

$(document).ready(function(){ $(".tooltip").hide();

$("#hover").hover(function(){
    $(this).find(".tooltip").stop().fadeIn();
    },function(){
    $(this).find(".tooltip").stop().delay(1000).fadeOut();
});

});
  1. https://api.jquery.com/stop/
  2. https://css-tricks.com/examples/jQueryStop/

Upvotes: 1

Alessandro Incarnati
Alessandro Incarnati

Reputation: 7246

You can use .stop() to clear the animation queue.

When .stop() is called on an element, the currently-running animation (if any) is immediately stopped.

  1. You need to remove the delay(1000) applied in the second function passed to the hover() method.

  2. Also make sure to add the stop() method to stop any current animation if you hover out quickly and clear the queue.

    $("#hover").hover(function(){
    $(this).find(".tooltip").stop().fadeIn();
    },function(){
    $(this).find(".tooltip").stop().fadeOut();
});

Make sure to wrap it all in a document ready function.

JSFIDDLE: http://jsfiddle.net/a_incarnati/8gC3D/2905/

$(document).ready(function(){
    $(".tooltip").hide();
    
    $("#hover").hover(function(){
        $(this).find(".tooltip").stop().fadeIn();
        },function(){
        $(this).find(".tooltip").stop().fadeOut();
    });
});
body{
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
}
#hover {
    position: relative;
    width:50px;
    height:50px;
    background: green;
}
.tooltip {
    position: relative;
    width: 45px;
    top: 80px;
    height: 20px;
    border: 1px solid black;
     padding: 5px;
}
a{
    display: inline-block;
    margin-top: 5px;
    height: 10px;
    width: 10px;
	border: 1px solid black;
    background: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<div id="hover">
    <div class="tooltip">
		
        <a href="#"></a>
        <a href="#"></a>
        <a href="#"></a>
		
    </div>
</div>

Upvotes: 2

Related Questions