Jquery Tooltip with hover

Question

i have a small Tooltip Script when the user hover a block the Tooltip will be shown and if the user leave the block the tooltip is hidden.

But i want also when the user hover over the tooltip the tooltip stay until the user leaves the tooltip or the hover block.

here is my javascript without the hover over the Tooltip:

$( "#hover, .tooltip" ).on('mouseenter', function() { 
   $( ".tooltip" ).fadeToggle( 400, function() {
       // Animation complete.
    });
});

$( ".tooltip, #hover" ).on('mouseleave', function() {
      $( ".tooltip" ).fadeToggle( 400, function() {
         // Animation complete.
      });
});

Here is a small Fiddle without the second part: http://jsbin.com/vocirucawoje/1/edit

Answer 1

<input type="button" class="hover" value="Click" />
<div class="tooltip" style="display:none;">Tool tip Text</div>


$('.hover').mouseenter(function () {
    $(".tooltip").stop().fadeToggle(400, function () {
        // Animation complete.
    });
});
$('.tooltip').mouseleave(function () {
    $(".tooltip").fadeToggle(400, function () {
        // Animation complete.
    });
});

It will help you.

Answer 2

use stop() to stop the animation.

$( "#hover, .tooltip" ).on('mouseenter', function() { 
   $( ".tooltip" ).stop().fadeToggle( 400, function() {
       // Animation complete.
    });
});

$( ".tooltip, #hover" ).on('mouseleave', function() {
      $( ".tooltip" ).stop().fadeToggle( 400, function() {
         // Animation complete.
      });
});