How to overwrite twitter bootstrap tooltip?

问题:

I'm using tooltips from Twitter Bootstrap package to show items information on the page. Sometimes information is changed, and needs to be updated in the tooltip. I tried simply to reinitialize tooltip with new title:

$('#selector').tooltip({ title: 'new text'});

However tooltip's title doesn't get changed with the new text. It remains the same as it was set initially. Any ideas why, and is there any work around? Thanks!

回答1:

Update : As pointed out by @Nigel-Angel, TWBS v3 uses data('bs.tooltip')

---

You can't override the tooltip object once you have initialized it on one element. But you can delete it and do it again.

Try deleting and then reinitialize the tooltip with all your options (if you had any).

$('#selector').data('tooltip',false)          // Delete the tooltip
              .tooltip({ title: 'new text'});

There may be a need to remove the listeners, but it works like that.

回答2:

This technique did not work for me so I found an answer, hidden in one of the comments of a similar question.

the cleanest way to update the display text of the tooltip

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

Thank you to lukmdo

回答3:

For some reason, this did not work for me (bootstrap 2.1.1). What I had to do was:

    $('#element').tooltip('destroy');
    $("#element").tooltip({'placement':'right', 'title':'larger larger text title'});
    $("#element").tooltip('show');

回答4:

I use bootstrap 3, and none of these worked for me without bugs. Destroying the tooltip via .tooltip('destroy') and recreating it in the same function .tooltip({...}) would result in the tooltip no longer working. It only worked if the recreation call was done later, after the destroy call had completed it's work asynchronously (hence why the immediate recreation was clobbered).

The suggestions to destroy the internal data .data('tooltip',false) did not work. Firstly, with bootstrap 3, it would be data('bs.tooltip, false) and when that was called, if the tooltip was currently displayed, it would leak it and leave it displayed permanently. The new tooltip would both display and hide over top of it.

My final solution was:

$x.tooltip('hide');
$x.data('bs.tooltip', false);
$x.tooltip({ ... }) // recreate it

Note that also changing the title via the .attr('title', '...') and similar solutions and calling .tooltip('fixupTitle') worked - but discarded the placement option and likely also the other options, and made a tooltip that was placed at the top the element rather than on the right, as it originally was. It might even have had some of the other bugs listed above, seen in other variations of this solution, but I didn't look much further.

回答5:

@Sherbrow You can use the simplest one.Need not to go this complicated solution. Here is the sample code.

$('#spanUsername').prop('title', newValue);     

回答6:

this works in bootstrap 3, above all other solutions given in this thread:

$('#tooltip_selector').attr('data-original-title', 'New Title Here');