Bootstrap Tooltip "Uncaught TypeError: Cannot read property 'trigger' of null"

Question

When I try to display a new tooltip, after destroying the old one, I get "Uncaught TypeError: Cannot read property 'trigger' of null" in the Chrome Console.

Then, when I was digging in the bootstrap code, I found this: And I suspect that is responsible for the exception I'm getting:

I've tried using the "selector" and "container" attributes when creating the new tooltip. One thing that worked was adding an event listener on another button, to destroy the tooltip, that way when I click register again, it works properly and no exceptions are thrown.

The example can be found at (click register twice): https://jsfiddle.net/08o4qgj5/1/ Code:

$("form#register").on("click", "button[name='btnRegister']", function () {
    //Destroy tooltip if exists
    $("input[name='email']").tooltip('destroy');
    //Adds new one
    $("input[name='email']").tooltip({title: "CYKA BLYAAAAAAT, IDI NAHUI!",
        placement: 'bottom',
        template:'<div class="tooltip" role="tooltip">' +
        '<div class="tooltip-arrow"></div>' +
        '<div class="tooltip-inner"></div>' +
        '</div>'});
    //Shows it
    $("input[name='email']").tooltip('show');
});

$("form#register").on("click", "button[name='btnDestroy']", function () {
    //Destroys tooltip
  $("input[name='email']").tooltip('destroy');
});

In the example I shown you, it's a bit useless to do this because there's only 1 input. But on my website, what I want to happen is:

1. Destroy any tooltip that might exist
2. Validate the user input
3. In case the input is invalid, I want to add a new tooltip to that input element

The most similar problem I've found someone having is: Bootstrap 3 Tooltip flickers but that didn't solve it for me.

Thanks in advance.

Answer 1

As destroying an html element may take some time, and some part of it's destruction may even be handled asynchronously, at the time you reach the creation/display of the new tooltip, it may be caught up in an unwanted state in the way.

Wrapping the initialization and showing of the tooltip inside a setTimeout(f(), t) with t [250, 400] works good here, check this JSFiddle. You're not supposed to use your destroy button

setTimeout(function() {
    $("input[name='email']").tooltip({title: "CYKA BLYAAAAAAT, IDI NAHUI!",
                                    placement: 'bottom',
                                    template:'<div class="tooltip" role="tooltip">' +
                                    '<div class="tooltip-arrow"></div>' +
                                    '<div class="tooltip-inner"></div>' +
                                    '</div>'});

    //Shows it
    $("input[name='email']").tooltip('show');
  }, 250);
});

Answer 2

Accepted answer might not resolve this issue. Problem with BS tooltip and also popover is, that if You trigger them manually, You have to specify that You trigger them manually, or BS will create target element events also that creates/destroys tooltip.

...
placement: 'bottom',
trigger: 'manual',
...