Change Twitter Bootstrap Tooltip content on click

Question

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

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

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.

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

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

for Bootstrap 4:

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

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

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