Elegant way to close twitter bootstrap tooltip

Question

I am using Twitter Bootstrap v3 to add a 'Invalid login' tooltip to the login button. Here's my code:

    $('#login-form').submit(function(event) {
        event.preventDefault();
        $.post('/user/login', $(this).serialize(), function(data) {
            if (data.result == true) {
                window.location.replace('/');
            } else {
                var target = $('#login-form button[type="submit"]');
                target.tooltip({
                    title:      'Invalid login',
                    placement:  'bottom',
                    trigger:    'manual',
                    animation:  true
                });
                target.tooltip('show');
                setTimeout(function() {
                    target.tooltip('destroy');
                }, 2000);
            }
        }, 'json')
    });

In particular, I am wondering if there is a better way to close the tooltip. I was hoping that I could configure the tooltip plugin to automatically fade after a few seconds. Alternatively, I tried chaining a .fade(2000) after the call to the 'show' method, but this didn't work.

The above code works, I'm just looking for a more elegant alternative.

Answer 1

You could try put the parameter "delay" when the tooltip initialize

like the following code

            target.tooltip({
                title:      'Invalid login',
                placement:  'bottom',
                trigger:    'manual',
                animation:  true,
                delay: { show: 2000, hide: 3000 }
            });