Jquery hover with setTimeout

I have a horizontal navigation menu and I want to show a tooltip when the user's mouse rests on the button for 1 second. Or in other words, I want there to be a delay for when the tip appears. The tooltip should disappear immediately when the user moves the mouse away. Stumbleupon's toolbar is an example of how I want this to function.

javascript:

$("a.btn").hover(
    function() {
        var tip = $(this).parent().children(".tip-wrapper");
        setTimeout(function{
            tip.show();
        }, 1000)
    },
    function {
        var tip = $(this).paren开发者_如何学编程t().children(".tip-wrapper");
        tip.hide();
    }
);

html:

<th title="">   
    <a href="#" class="btn">
        <span class="person">Firstname Lastname</span>
    </a>

    <div class="tip-wrapper">
        <div class="tip-border">
            <div class="tip">
               tool tips go here
            </div>
        </div>
    </div>  
</th>

I've looked at many tutorials and can't figure out why mine doesn't work.

If the mouse moves away before the timeout happens, you'll hide() it immediately, then show() it after the timeout runs.

Instead, you should use the hoverIntent plugin, which does this for you.

you have some syntax errors : function { should be function() { (same goes for setTimeout(function{ => setTimeout(function(){);
I suggest using a variable that refers to your timeout function. That way, you can stop the appearance of the tooltip if the user does not hover the element at least one second. :

var timeout;
$("a.btn").hover(
    function() {
        var tip = $(this).siblings(".tip-wrapper");
        timeout = setTimeout(function(){
            tip.show();
        }, 1000);
    },
    function() {
        // prevent the tooltip from appearing
        clearTimeout(timeout);
        var tip = $(this).siblings(".tip-wrapper");
        tip.hide();
    }
);

Also, you should hide your tooltips at the beginning. is a live working sample.

As long as you're already using jquery in your project, I suggest you take advantage of it and use it's animation function instead. This way, your code becomes :

$("a.btn").hover(
    function(){
        $(this).siblings('.tip-wrapper').fadeIn(1000);
    },
    function(){
        $(this).siblings('.tip-wrapper').stop().hide();// or fadeOut();
    }
);

p.s.: use .siblings() instead of .parent().children()

First, there were a few syntax errors in your script (as gion_13) pointed out.

Second, to make sure the tooltip doesn't show erroneously if the user moves the mouse away before the timeout is complete, you'll want to use a variable to store your timeout so that you can clear it in hover's handlerOut parameter.

Working Fiddle.