14

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!

bbbonthemoon
  • 1,760
  • 3
  • 19
  • 31

6 Answers6

17

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('bs.tooltip',false)          // Delete the tooltip
              .tooltip({ title: 'new text'});

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

Before TWBS v3 you would not need the bs namespace giving : data('tooltip')

Sherbrow
  • 17,279
  • 3
  • 64
  • 77
  • 2
    @bbbonthemoon Just stumbled upon this post : http://stackoverflow.com/a/9875490/1478467 which may be cleaner – Sherbrow Jun 26 '12 at 20:12
  • I've got some javascript which adds a custom style to certain blocks of text. The tooltips were not working on the replaced text, but the above change fixes it! – Richard Corden Jun 24 '13 at 09:54
  • 5
    If you're using boostrap3 you need to use `data('bs.tooltip')` instead of `data('tooltip')` –  Jun 05 '14 at 19:31
8

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

Community
  • 1
  • 1
George Albertyn
  • 267
  • 4
  • 11
3

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.

yourpublicdisplayname
  • 214
  • 2
  • 12
2

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');
aszahran
  • 370
  • 2
  • 8
  • This is what worked for me. I was using two completely different tooltips based on the context of the UI. Thank you @aszahran. – Hallmanac Oct 05 '17 at 11:11
0

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

$('#spanUsername').prop('title', newValue);
RBT
  • 24,161
  • 21
  • 159
  • 240
Well Wisher
  • 1
0

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

$('#tooltip_selector').attr('data-original-title', 'New Title Here');
cguWEB
  • 11
  • 1
  • 2