Change Twitter Bootstrap Tooltip content on click

Question

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 th

Answer 1

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.

Answer 2

Just found this today whilst reading the source code. So $.tooltip(string) calls any function within the Tooltip class. And if you look at Tooltip.fixTitle, it fetches the data-original-title attribute and replaces the title value with it.

So we simply do:

$(element).tooltip('hide')
          .attr('data-original-title', newValue)
          .tooltip('fixTitle')
          .tooltip('show');

and sure enough, it updates the title, which is the value inside the tooltip.

A shorter way:

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

Answer 3

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.

Answer 4

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

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

Answer 5

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

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

Answer 6

With Tooltip object Boostrap :

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