Change Twitter Bootstrap Tooltip content on click

238

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 question is tagged with jquery twitter-bootstrap tooltip

~ Asked on 2012-02-29 15:30:40

The Best Answer is


422

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

~ Answered on 2012-03-26 15:58:05


110

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

~ Answered on 2014-05-01 08:57:39


Most Viewed Questions: