Issue with elements that are deleted before the tooltip shows up.

by lddubeau

HTML

<link rel="stylesheet" href="https://rawgithub.com/twbs/bootstrap/master/dist/css/bootstrap.css">
<script src="https://rawgithub.com/twbs/bootstrap/master/dist/js/bootstrap.js"></script>
<p>This example illustrates a problem with tooltips. If the element on which the tooltip was created disappears in the interval between the delay, an error results. The <code>placement: "auto"</code> option is necessary for the problem to occur.</p>

<h4>Independent</h4>

<p>These buttons remove themselves and <b>only</b> themselves.</p>

<p id="independent">
<button id="delay">Container is Button</button>
<button id="delay-body">Container is Body</button>
</p>

<h4>Mutual</h4>

<p>In this example. clicking either button will remove the two <code>button</code> elements.</p>

<p id="mutual">
    <button>One</button>
    <button>Two</button>
</p>

<h4>Ancestor</h4>

<p>In this example, clicking a button removes the an <b>ancestor</b> (actually, the immediate parent) of the two buttons. When the ancestor of the buttons is removed, the problem illustrated by the earlier code does not occur.</p>

<p id="parent">
    <button>One</button>
    <button>Two</button>
</p>

<h4>Move</h4>

<p>In this example, the buttons are moved instead of deleted. The problem does not occur.</p>

<p id="move">
    <button>One</button>
    <button>Two</button>
</p>

<p id="dump">
    Dumping area. This is where we move the buttons in the moving test above.
</p>

JavaScript

var $delay = $("#delay");
var $delay_body = $("#delay-body");
$delay.tooltip({
    title: "foo",
    container: $delay,
    delay: {
        show: 1000
    },
    placement: "auto"
});
$delay_body.tooltip({
    title: "foo",
    container: "body",
    delay: {
        show: 1000
    },
    placement: "auto"
});
var $all_indep = $("#independent button");
$all_indep.click(function (ev) {
    //$(ev.currentTarget).tooltip('destroy');
    $(ev.currentTarget).remove();
});
//
// This cannot work because the button is not in the DOM when the
// event is generated...
//$all_indep.on("show.bs.tooltip", function (ev) {
//    if (!$(ev.currentTarget).closest("body")[0])
//        ev.preventDefault();
//});
//

var $all_mutual = $("#mutual button");
$all_mutual.click(function (ev) {
    // $(ev.currentTarget).tooltip('destroy');
    $all_mutual.remove();
});
$all_mutual.tooltip({
    title: "foo",
    delay: {
        show: 1000
    },
    placement: "auto"
});

var $all_parent = $("#parent button");
$all_parent.click(function (ev) {
    $("#parent").remove();
});
$all_parent.tooltip({
    title: "foo",
    delay: {
        show: 1000
    },
    placement: "auto"
});


var $all_move = $("#move button");
$all_move.click(function (ev) {
    $("#dump").append($all_move);
});
$all_move.tooltip({
    title: "foo",
    delay: {
        show: 1000
    },
    placement: "auto"

});