CODEWITHSUNDEEP
javascriptjquerycsstwitter-bootstraptwitter-bootstrap-3
Alireza Fattahi
Alireza Fattahi

Reputation: 45505

Hide bootstrap tooltip after three seconds

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.net/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?

Upvotes: 1

Views: 3569

Answers (5)

Alexander Volkov
Alexander Volkov

Reputation: 3

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);
    });
});

Upvotes: 0

Krupesh Kotecha
Krupesh Kotecha

Reputation: 2412

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.com/dist/css/bootstrap.css');
 body {
  margin: 30px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://cdnjs.cloudflare.com/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>

Upvotes: 1

Finrod
Finrod

Reputation: 2550

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

Upvotes: 1

Vnuuk
Vnuuk

Reputation: 6527

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)

})

Upvotes: 0

Andy
Andy

Reputation: 63524

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.

Upvotes: 7

Related Questions