onmouseover show/ hide div and can select the text of div

Question

I want to Show and hide one tooltip on hover of an anchor. but tooltip should be there till my cursor on it.

fiddle

$('#showReasonTip').mouseover(function(){
$(this).parent().find('#reasonTip').slideDown()}).mouseout(function(){
       $(this).parent().find('#reasonTip').slideUp()
    }
)

thanks in advance.

Answer 1

Try

jQuery(function ($) {
    $('#showReasonTip').hover(function () {
        var $target = $('#reasonTip');
        clearTimeout($target.data('hoverTimer'));
        $target.stop(true, true).slideDown();
    }, function () {
        var $target = $('#reasonTip');
        var timer = setTimeout(function () {
            $target.stop(true, true).slideUp();
        }, 200);
        $target.data('hoverTimer', timer);
    });

    $($('#reasonTip')).hover(function () {
        clearTimeout($(this).data('hoverTimer'));
    }, function () {
        $(this).stop(true, true).slideUp();
    });
});

Demo: Fiddle

Answer 2

You should try using mouseleave instead of mouseout and that too on #reasonTip and not on #showReasonTip .

$('#showReasonTip').mouseover(function(){
  $(this).parent().find('#reasonTip').slideDown()
});
$('#reasonTip').mouseleave(function(){
  $(this).parent().find('#reasonTip').slideUp()
});

Here's the modified fiddle with a small change in your code.