CODEWITHSUNDEEP
jquerysettimeout
user1002039
user1002039

Reputation: 860

jQuery setTimeout

I'd like to add a timeout to this tooltip code so it only displays if the mouse hovers over it after a while rather than immediately... I tried adding the setTimeout() but I could not figure out how to use the clearTimeout() so the tooltip does not hide on mouseout. Can you help?

// -----------------------------------------------
// TOOLTIP MOUSE HOVER
// -----------------------------------------------
function mcTooltip() {
    $('.mcTxb').mousemove(function(e) {
        var mcHoverText = $(this).attr('alt');
        var mcTooltip = $('.mcTooltip');
        $(mcTooltip).text(mcHoverText).show('fast');
        $(mcTooltip).css('top', e.clientY + 10).css('left', e.clientX + 10);
    }).mouseout(function() {
        var mcTooltip = $('.mcTooltip');
        $(mcTooltip).hide('fast');
    });
}
mcTooltip();

I tried this:

    // -----------------------------------------------
// TOOLTIP MOUSE HOVER
// -----------------------------------------------
function mcTooltip() {
    $('.mcTxb').mousemove(function(e) {
        var mcHoverText = $(this).attr('alt');
        var mcTooltip = $('.mcTooltip');
        setTimeOut(function(){
            $(mcTooltip).text(mcHoverText).show('fast');
        }, 300);
        $(mcTooltip).css('top', e.clientY + 10).css('left', e.clientX + 10);
    }).mouseout(function() {
        var mcTooltip = $('.mcTooltip');
        $(mcTooltip).hide('fast');
    });
}
mcTooltip();

Upvotes: 8

Views: 44357

Answers (6)

Anthony Carbon
Anthony Carbon

Reputation: 618

setTimeout is does not work on mouseover or hover. It is safe to use .delay().

setTimeout(function(){
    $(mcTooltip).text(mcHoverText).show('fast');
}, 300);

// use this instead.

$(mcTooltip).text(mcHoverText).delay(3000).show('fast');

Upvotes: 0

JSV
JSV

Reputation: 351

This question is old, but I thought I answer it for others. The main reason the timeout was not working was the case of "setTimeOut" . You cant camel hump the Out part. Its "setTimeout".

Upvotes: 1

Alnitak
Alnitak

Reputation: 339786

As you're using animation, you can use .delay() to defer the appearance of your tooltip:

$(mcTooltip).text(mcHoverText).delay(1000).show('fast');

In your mouseout function, use .stop to cancel any existing delays or animations, and then hide the tooltip:

$(mcTooltip).stop(true).hide('fast');

Upvotes: 15

Jasper
Jasper

Reputation: 75993

var my_timer;
$('.mcTxb').hover(
    function () {
        my_timer = setTimeout(function () {
            //do work here
        }, 500);
    },
    function () {
        clearTimeout(my_timer);
    }
);

This will wait half a second before doing whatever when you mouseover the element and the whatever will not happen if you mouseout within the half second.

Upvotes: 4

Purag
Purag

Reputation: 17061

  1. Use hover() instead, it's less code (and that's always good, IMO).

Like so:

function mcToolTip() {
    $(".mcTxb").hover(function(){
        // mouseover stuff here
        $("element").delay(3000).show(); // 3 second delay, then show
    }, function(){
        // mouseout stuff here
    });
}

Upvotes: 1

user1106925
user1106925

Reputation:

One option is to use the hoverIntent plugin to accomplish what you want.

Upvotes: 2

Related Questions