CODEWITHSUNDEEP
javascriptjquerytwitter-bootstrap
goto
goto

Reputation: 45

Twitter Bootstrap Tooltip showing / hiding consecutively

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.

Upvotes: 3

Views: 2587

Answers (2)

egbrad
egbrad

Reputation: 2417

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

Upvotes: 1

Bodo Hombah
Bodo Hombah

Reputation: 209

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.

Upvotes: 0

Related Questions