[jquery] Change Twitter Bootstrap Tooltip content on click

I have a tooltip on an anchor element, that sends an AJAX request on click. This element has a tooltip (from Twitter Bootstrap). I want the tooltip content to change when the AJAX request returns successfully. How can I manipulate the tooltip after initiation?

$(this).attr('data-original-title', 'click here to publish')
       .tooltip('fixTitle')
       .tooltip('show');

Useful if you need to change a tooltip's text after it has been initialized with attr 'data-original-title'.

In Bootstrap 3 it is sufficient to call elt.attr('data-original-title', "Foo") as changes in the "data-original-title" attribute already trigger changes in the tooltip display.

UPDATE: You can add .tooltip('show') to show the changes immediately, you need not to mouseout and mouseover target to see the change in the title

elt.attr('data-original-title', "Foo").tooltip('show');

You can just change the data-original-title using the following code:

$(element).attr('data-original-title', newValue);

Destroy any pre-existing tooltip so we can repopulate with new tooltip content

$(element).tooltip("destroy");    
$(element).tooltip({
    title: message
});

I couldn't get any of the answers working, here's a workaround:

$('#'+$(element).attr('aria-describedby')+' .tooltip-inner').html(newTitle);

you can use this code to hide the tool tip change its title and show the tooltip again, when the ajax request returns successfully.

$(element).tooltip('hide');
$(element).attr('title','this is new title');
$(element).tooltip('fixTitle');
setTimeout(function() {  $(element).tooltip('show');}, 500);

I'm using this easy way out:

$(document).ready(function() {_x000D_
    $("#btn").prop('title', 'Click to copy your shorturl');_x000D_
});_x000D_
_x000D_
function myFunction(){_x000D_
  $(btn).tooltip('hide');_x000D_
  $(btn).attr('data-original-title', 'Test');_x000D_
  $(btn).tooltip('show');_x000D_
});

In bootstrap 4 I just use $(el).tooltip('dispose'); then recreate as normal. So you can put the dispose before a function that creates a tooltip to be sure it doesn't double up.

Having to check the state and tinker with values seems less friendly.

Here is update for the Bootstrap 4:

var title = "Foo";
elt.attr('data-original-title', title);
elt.tooltip('update');
elt.tooltip('show');

But the best way is to do like this:

var title = "Foo";
elt.attr('title', title);
elt.attr('data-original-title', title);
elt.tooltip('update');
elt.tooltip('show');

or inline:

var title = "Foo";
elt.attr('title', title).attr('data-original-title', title).tooltip('update').tooltip('show');

From the UX side you just see that text is changed with no fading or hide/show effects and there is no needs for the _fixTitle.

for Bootstrap 4:

$(element).attr("title", "Copied!").tooltip("_fixTitle").tooltip("show").attr("title", "Copy to clipboard").tooltip("_fixTitle");

Thanks this code was very helpful for me, i found it effective on my projects

$(element).attr('title', 'message').tooltip('fixTitle').tooltip('show');

Bootstrap 4

$('#topic_1').tooltip('dispose').tooltip({title: 'Goodbye'}).tooltip('show')

https://getbootstrap.com/docs/4.1/components/tooltips/#tooltipdispose

$('#topic_1').tooltip({title: 'Hello'}).tooltip('show');
setTimeout( function() {
  $('#topic_1').tooltip('dispose').tooltip({title: 'Goodbye'}).tooltip('show');
}, 5000);

#topic_1 {
  border: 1px solid red;
  margin: 50px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css" integrity="sha384-Smlep5jCw/wG7hdkwQ/Z5nLIefveQRIY9nfy6xoR1uRYBtpZgI6339F5dgvm/e9B" crossorigin="anonymous">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/js/bootstrap.min.js" integrity="sha384-o+RDsa0aLu++PJvFqy8fFScvbHFLtbvScb8AjopnFD+iEQ7wo/CG0xlczd+2O/em" crossorigin="anonymous"></script>

<div id="topic_1">Topic 1</div>

This worked for me: (bootstrap 3.3.6; jquery=1.11.3)

<a id="alertTooltip" href="#" data-html="true" class="tooltip" data-toggle="tooltip" title="Tooltip message"></a>

<script>
  $('#alertTooltip').attr('title', "Tooltip new <br /> message").tooltip('fixTitle');
</script>

The attribute data-html="true" allow to use html on the tooltip title.

The following worked the best for me, basically I'm scrapping any existing tooltip and not bothering to show the new tooltip. If calling show on the tooltip like in other answers, it pops up even if the cursor isn't hovering above it.

The reason I went for this solution is that the other solutions, re-using the existing tooltip, led to some strange issues with the tooltip sometimes not showing when hovering the cursor above the element.

function updateTooltip(element, tooltip) {
    if (element.data('tooltip') != null) {
        element.tooltip('hide');
        element.removeData('tooltip');
    }
    element.tooltip({
        title: tooltip
    });
}

With Tooltip object Boostrap :

$(element).attr('data-original-title', 'New value');
$(element).data('bs.tooltip').tip().find('.tooltip-inner').text('New value');

For BS4 (and BS3 with minor changes) .. after hours of searching and trials, i came up with the most reliable solution for this problem and it even solves the problem of opening more than one (tooltip or popover) at the same time, and the problem of opening automatically after losing focus, etc.

$('[data-toggle="tooltip"]').tooltip({_x000D_
  trigger: 'hover'_x000D_
}).on('shown.bs.tooltip', function() {_x000D_
  var link = $(this);_x000D_
  var data = '';_x000D_
  data += '<ul style="list-style-type:none;margin:0;padding:0;text-align:left;font-size:12px">';_x000D_
  data += ' <li>Sherif Salah</li>';_x000D_
  data += ' <li>Muhammad Salah</li>';_x000D_
  data += ' <li>and a gazillion more...</li>';_x000D_
  data += '</ul>';_x000D_
  link.attr('data-original-title', data);_x000D_
  setTimeout(function() {_x000D_
    if (link.is(':hover')) {_x000D_
      link.tooltip("dispose").tooltip("show");_x000D_
    }_x000D_
  }, 1000);_x000D_
});

<!doctype html>_x000D_
<html lang="en">_x000D_
_x000D_
<head>_x000D_
  <meta charset="utf-8">_x000D_
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">_x000D_
  <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />_x000D_
</head>_x000D_
_x000D_
<body>_x000D_
  <div class="card">_x000D_
    <div class="card-body text-center">_x000D_
      <a href="JavaScript:void(0);" class="btn btn-sm btn-link" data-toggle="tooltip" data-placement="top" data-html="true" title="Loading...">gazillion</a>_x000D_
    </div>_x000D_
  </div>_x000D_
  <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>_x000D_
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>_x000D_
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>_x000D_
</body>_x000D_
_x000D_
</html>

This works if the tooltip has been instantiated (possibly with javascript):

$("#tooltip_id").data('tooltip').options.title="New_value!";
$("#tooltip_id").tooltip('hide').tooltip('show');

I only tested this in bootstrap 4 & w/o calling .show()

el.tooltip('hide').attr('data-original-title', 'message');

Change the text by altering the text in the element directly. (does not update the tooltip position).

$('.tooltip-inner', $element.next()).html(newHtml);
$('.tooltip-inner', $element.next()).text(newText);

Change the text by destroying the old tooltip, then creating and showing a new one. (Causes the old one to fade out and the new one to fade in)

$element
.tooltip('destroy')
.tooltip({
    // Repeat previous options.
    title: newText,
})
.tooltip('show');

I'm using the top method to both animate the "Saving." message (using &nbsp so the tooltip does not change in size) and to change the text to "Done." (plus padding) when the request completes.

$element.tooltip({
  placement: 'left',
  title: 'Saving...',
  trigger: 'manual',
}).tooltip('show');

var parent = $element.parent();
var interval_id = setInterval(function(){
    var text = $('.tooltip-inner', parent).html();
    switch(text) {
    case 'Saving.  ': text = 'Saving.. '; break;
    case 'Saving.. ': text = 'Saving...'; break;
    case 'Saving...': text = 'Saving.  '; break;
    }
    $('.tooltip-inner', parent).html(text);
}, 250);

send_request( function(){
    // When the request is complete
    clearInterval(interval_id);
    $('.tooltip-inner', parent).html('Done.    ');
    setTimeout(function() {
        $element.tooltip('hide');
    }, 1500 /* Show "Done." for a bit */);
});

heres a nice solution if you want to change the text without closing and reopening the tooltip.

$(element).attr('title', newTitle)
          .tooltip('fixTitle')
          .data('bs.tooltip')
          .$tip.find('.tooltip-inner')
          .text(newTitle)

this way, text replaced without closing tooltip (doesnt reposition, but if you are doing a one word change etc it should be fine). and when you hover off + back on tooltip, it is still updated.

**this is bootstrap 3, for 2 you probably have to change data/class names

you can update the tooltip text without actually calling show/hide:

$(myEl)
    .attr('title', newTitle)
    .tooltip('fixTitle')
    .tooltip('setContent')

For bootstrap 3.x

This seems like cleanest solution:

$(element)
  .attr('data-original-title', 'New title').tooltip('show')

Show is used to make title update right away and not wait for tooltip to be hidden and shown again.

if you have set the title attribute in HTML then use on click of the icon or button $(this).attr('title',newValue);

You can set content on tooltip call with a function

        $("#myelement").tooltip({
            "title": function() {
                return "<h2>"+$("#tooltipcontainer").html()+"</h2>";
            }
        });

You don't have to use only the title of the called element.

I think Mehmet Duran is almost right, but there were some problems when using multiple classes with the same tooltip and their placement. The following code also avoids js errors checking if there is any class called "tooltip_class". Hope this helps.

if (jQuery(".tooltip_class")[0]){    

        jQuery('.tooltip_class')
            .attr('title', 'New Title.')
            .attr('data-placement', 'right')
            .tooltip('fixTitle')
            .tooltip('hide');

    }