In a bootstrap 3.5 based web site, we are going to change an input text tooltip when a button is clicked show it and remove tooltip in three seconds.

<input type="text" id="sample" title="Tip">
<button name="change me" id="changeBtn">Change Tool Tip!</button>



//Initiall tooltip for all elements
$("[title!='']").tooltip();

$("#changeBtn").click(function () {

    //Change tooltip text
    $("#sample").attr('title', 'New Tip!').tooltip('fixTitle').tooltip('show');

    //remove tooltipe after 3 sec
    setTimeout(function () {
        $(this).tooltip('destroy');
    }, 3000)

})

/

The problem is that the tooltip is not destroyed and keep showing. If I change the $(this).tooltip('destroy'); to $("[title!='']").tooltip('destroy'); it will work, but it is not correct as it will remove all other tool tips.

Any Comments?

In a bootstrap 3.5 based web site, we are going to change an input text tooltip when a button is clicked show it and remove tooltip in three seconds.

<input type="text" id="sample" title="Tip">
<button name="change me" id="changeBtn">Change Tool Tip!</button>



//Initiall tooltip for all elements
$("[title!='']").tooltip();

$("#changeBtn").click(function () {

    //Change tooltip text
    $("#sample").attr('title', 'New Tip!').tooltip('fixTitle').tooltip('show');

    //remove tooltipe after 3 sec
    setTimeout(function () {
        $(this).tooltip('destroy');
    }, 3000)

})

http://jsfiddle/red4w2re/

The problem is that the tooltip is not destroyed and keep showing. If I change the $(this).tooltip('destroy'); to $("[title!='']").tooltip('destroy'); it will work, but it is not correct as it will remove all other tool tips.

Any Comments?

• javascript
• jquery
• css
• twitter-bootstrap
• twitter-bootstrap-3

5 Answers 5

Because the context of this changes in the setTimeout, save a copy of this to a new variable and use that instead:

$("#changeBtn").click(function () {

    var _this = this;

    setTimeout(function () {
        $(_this).tooltip('destroy');
    }, 3000)

})

There's some invaluable information on scope and context here.

In the setTimeout, this is not your tooltip, so you have to save it in a variable before:

$("#changeBtn").click(function () {
    // Save tooltip
    var myTooltip = $("#sample").attr('title', 'New Tip!');

    //Change tooltip text
    myTooltip.tooltip('fixTitle').tooltip('show');

    //remove tooltipe after 3 sec
    setTimeout(function () {
        myTooltip.tooltip('destroy');
    }, 3000)
});

Working example

try this

//Initiall tooltip for all elements
$("[title!='']").tooltip();
$("#changeBtn").click(function() {
  //Change tooltip text
  $("#sample").attr('title', 'New Tip!').tooltip('fixTitle').tooltip('show');
  //remove tooltipe after 3 sec
  setTimeout(function() {
    $("#sample").attr('title', 'New Tip!').tooltip('fixTitle').tooltip('hide');
  }, 3000)
})

@import url('http://getbootstrap./dist/css/bootstrap.css');
 body {
  margin: 30px;
}

<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://cdnjs.cloudflare./ajax/libs/twitter-bootstrap/2.1.0/bootstrap.min.js"></script>
<input type="text" id="sample" title="Tip">
<button name="change me" id="changeBtn">Change Tool Tip!</button>

See my fix. As you can see, the problem was with usage of this keyword:

$("[title!='']").tooltip();

$("#changeBtn").click(function () {

    $("#sample").attr('title', 'New Tip!').tooltip('fixTitle').tooltip('show');

    setTimeout(function () {
        $("[title!='']").tooltip('destroy');
    }, 3000)

})

I think thas's better to use:

$(function ()
{
    let tooltipTarget = $('[data-toggle="tooltip"]');
    $(tooltipTarget).tooltip({delay: { "show": 100, "hide": 300 }});

    let timeoutHandler = null;

    $(tooltipTarget).on('show.bs.tooltip', function () {
        let that = this;

        clearTimeout(timeoutHandler);

        timeoutHandler = setTimeout(function () {
            $(that).tooltip('hide');
        }, 3000);
    });
});