Twitter Bootstrap Tooltip showing / hiding consecutively

Question

I have an Problem by showing and hiding consecutively a tooltip.

Have a look at this snippet: http://jsfiddle.net/r7GCJ/

the input-field shows an tooltip if the number in the tooltip is even.

If you fast triple-click the backspace-key (which means '6' is the last char), you will not see the bootstrap tooltip, even though the number is even. (Maybe you need one or two attempts)

Anyone an idea how to fix this problem, or whats the problem?

PS: In my 'real code' I have to look up via AJAX if the number is already in a DB, and if so I show the tooltip.

Answer 1

That is a curious issue. I have found a solution, although I'll admit it's a bit kludgy. Instead of hiding it, I'm destroying it and recreating it whenever I want to show it. I can't reproduce the issue in fiddle anymore.

$('#fooInput').keyup(function (e) {
    var $foo = $(e.target);
    if (parseInt($foo.val()) % 2 === 0) {
        // create the tooltip
        $foo.tooltip({
            trigger: 'manual',
            title: 'gerade Zahl!',
            placement: 'bottom'
        });
        $foo.tooltip('show');
    } else {
        $foo.tooltip('destroy');
    }
});

FIDDLE

Answer 2

Very interesting thing :D. I don't know why but this is non common situation. You can solve this by writing <input id="fooInput" type="text" /> instead of your code with initial value. You can add another tooltip to say that only numbers are allowed.