CODEWITHSUNDEEP
jquerytooltip
fedejp
fedejp

Reputation: 970

How to make item's title fade away

I'm using jquery's tooltip to display the title of and item:

<a href="#" title="Delete" class="show-option" />

And JS:

$(function() {
$( ".show-option" ).tooltip({
    show: {
    effect: "slideDown",
    delay: 300
    }
});
});

The problem is that as long as the cursor hovers over the item, the title will be displayed. But what I want is a title that fades away after 3 seconds of the cursor being over the item.

I've been looking around for some solutions but nothing works, hope this is possible to do.

Upvotes: 0

Views: 124

Answers (3)

Arun P Johny
Arun P Johny

Reputation: 388396

Try

$(function() {
    $( ".show-option" ).tooltip({
        show: {
            effect: "slideDown",
            delay: 300
        },
        open: function( event, ui ) {
            var timer = setTimeout($.proxy(function(){
                $(this).tooltip( "close" );
            },this), 3000);
            $(this).data('hidetimer', timer)
        },
        close: function( event, ui ) {
            clearTimeout($(this).data('hidetimer'))
        }
    });
});

Demo: Fiddle

Upvotes: 2

Juan Ignacio Mignaco Fern&#225;ndez
Juan Ignacio Mignaco Fern&#225;ndez

Reputation: 416

you can try something like this:

$( ".show-option" ).on('mouseover', function() { var that = this; setTimeout(function(){ $(that).tooltip( "close" ); }, 3000); });

There's a working sample here: http://jsfiddle.net/juaning/J9LSd/1/

PS: Guessed you were using jqueryui

Upvotes: 1

Secret
Secret

Reputation: 3358

$( ".show-option" ).mouseover(function() {
   $( ".show-option" ).fadeOut('slow', function() {
     // Animation complete.
  }, 3000);
});

Haven't tested it, but should give you what you need.

Upvotes: 1

Related Questions