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 the AJAX request returns successfully. How can I manipulate the tooltip after initiation?

Solution 1

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

Solution 2

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

Solution 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.

Solution 4

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

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

Solution 5

for Bootstrap 4:

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

View more solutions

Comments

[James McMahon]

You can also change the title through the data('tooltip').options property, see stackoverflow.com/questions/10181847/…

[Daniel Miliński]

Best Answer to this.Question.

[ajbeaven]

With bootstrap 3, it becomes $('#tooltip_id').data('bs.tooltip').options.title = 'New_value!';

[ndreckshage]

scroll down (or stackoverflow.com/a/20713610/1350306) to change text without closing/reopening the toolip.

[Nigel Angel]

If you're using boostrap3 you need to use data('bs.tooltip') instead of data('tooltip')

[Augustin Riedinger]

Says $tip is not an attribute of $(element)

[Augustin Riedinger]

Did that: $(element).attr('title', newTitle).tooltip('fixTitle').parent().find('.tooltip .tooltip-inner').text(newTitle);

[user2846569]

Couldn't find documentation on 'fixTitle', so I guess not a good idea to use this!? ...

[tremby]

I'm updating a tooltip on a neighbouring element when typing into a text field, and the tooltip is disappearing for me with this code when I press a key.

[Wojciech Zylinski]

Thanks for this. The only problem with this solution is that it seems to mess up tooltip position after text change.

[markau]

This, with .tooltip('show') on the end of the chain, worked for me.

[thouliha]

Hey relational, could you change your answer to reflect the comments corrections? Thanks.

[Roy Hyunjin Han]

You can safely omit the call to fixTitle: $(element).attr('data-original-title', 'xyz')

[brauliobo]

yeah, setContent and show does the trick! you can change data-original-title directly instead of using fixTitle

[Lev Lukomsky]

It not applies changes immediately, you need to mouseout and mouseover target to see the new title text

[Jared]

This is actually the best answer and you can add .tooltip('show'); to get it to show after the update

[molerat]

Is there a way to update the text without manipulating the title-attribute?

[sksallaj]

I removed tooltip('hide') and tooltip('fixTitle'), and it worked still

[Gabe O'Leary]

This actually didn't work for me, the tooltip switched values and then disappeared quickly. $(element).attr('data-original-title', newValue).tooltip('show'); was the simplest working solution for me.

[jyoseph]

This is the only solution (out of many tried) that seemed to just work (bs3). Nice solution for sure!

[jac1013]

I was having trouble with the tooltip after using both methods (it was disappearing a not coming back again), it was basically because of the native focus so adding $element.trigger('focusout') fixed that problem for me.

[Geoffroy CALA]

In my case @lukmdo solution didn't work properly. I still could see the old title for a moment so the tooltip('hide') was useful.

[Ayyaz Zafar]

This solution is better than all others

[César León]

This works in firefox, chrome, IE and Edge, "$(element).attr('data-original-title', newValue).tooltip('show');" , was indeed the simplest working solution, thanks.

[Jamie M]

@fsasvari in bootstrap 4 just change it to '_fixTitle'

[Mubramaj]

I am using Bootstrap v4.1.2 and I had to use _fixTitle instead of fixTitle

[Fifi]

Should we call $(el).tooltip('dispose') before or after updating the tooltip title ?

[Martin Lyne]

@imabot dispose of old tooltip, then recreate with new data. If your tooltips are complex you may want to retrieve or otherwise store the initial config so you can just recreate with that config + new values. Hope that makes sense.

[Chloe]

This uses undocumented API. Beware.

[Ricardo]

Tested on Bootstrap v2.3.1

[Hammad Sajid]

why it didn't work when i use single quote as in second parameter around 'Foo' like .attr('data-original-title', 'Foo') ??

[Ben in CA]

Bootstrap 4 - noted below - use .tooltip('update');

[Fouad]

$(element).attr('title', 'NEW_TITLE') is enough to update the title

[Yes Barry]

This feels like the cleanest solution.

[Alexander]

The solution worked for me, thanks! In general, please note that you can only update tooltips which are enabled. So in case you have manually disabled a tooltip, you have to re-enable it by using elt.tooltip('enable') before updating it.

[JV conseil]

Since Bootstrap v5 it is data-bs-original-title instead of data-original-title

[Vikcen]

In my case works without ".tooltip('fixTitle')" just in this way: $(element).tooltip('hide') .attr('data-original-title', newValue) .tooltip('show');