Update Boostrap Tooltip dynamically

Question

I am using Bootstrap Tooltip. I have enabled the Tooltip html to allow me to use the html span in the title attribute.

I am having problem updating the value in the span dynamically.

See demo: https://jsfiddle.net/DTcHh/38497/

If you click on Update Tooltip button, the tooltip should change to: 10 x 20

What went wrong?

jQuery:

  $(function() {
    $('[data-toggle="tooltip"]').tooltip({
      html: true
    });

    $('body').on('click', '.update', function() {
       $('.a').text(10);
       $('.b').text(20);
    });
  });

html

<a href="#" data-toggle="tooltip" title="<span class='a'>2</span> x <span class='b'>5</span>">
  Hover Me
</a>

<button class="update">Update Tooltip</button>

Problem is that the tooltip text isn't HTML, it's just text so jQuery won't find it. — DavidG, Oct 18 '17 at 17:34
[**This may help you!**](https://stackoverflow.com/a/9875490/3452741) , Good luck :) — Sam Bo Hamdan, Oct 18 '17 at 17:51
@SamBoHamdan Not really, I need have availability to find selector in tooltip text — I'll-Be-Back, Oct 18 '17 at 17:52

score 2 · Accepted Answer · answered Oct 18 '17 at 17:37

2

.a and .b are not the elements in DOM. They get created only when you try to hover on the tooltip.

So instead of changing that, just change the a data-original-title to the updated text.

For ex:

$('body').on('click', '.update', function() {
       $("a").attr("data-original-title", "<span class='a'>10</span> x <span class='b'>20</span>");
});

Updated Fiddle

answered Oct 18 '17 at 17:37

void

36,090
8
62
107

I can't rewrite whole span block in my case. Maybe get data-original-title string and convert to dom and then find `$(dom).text(10);`? – I'll-Be-Back Oct 18 '17 at 17:39
Can I know why you cant get that span? I doubt that the approach you suggesting will not work, – void Oct 18 '17 at 17:42
something like that I meant https://jsfiddle.net/DTcHh/38501/ - couldnt get it work yet. – I'll-Be-Back Oct 18 '17 at 17:49
You are anyway accessing and writing it. Then why to preserve the span instead just overwrite it completely. Something like https://jsfiddle.net/DTcHh/38502/ – void Oct 18 '17 at 17:54
https://jsfiddle.net/moyeen52/DTcHh/38503/ Updated fiddle. Not sure whether this was meant or not. @I'll-Be-Back – moyeen52 Oct 18 '17 at 17:57

Marko Šutija · Answer 2 · 2017-10-18T17:38:34.613

-1

Change $('body').on('click',... to $('.update').on('click', function(){ $('[data-toggle="tooltip"]').attr('title', '10 x 20'); });.

edited Oct 18 '17 at 17:38

answered Oct 18 '17 at 17:34

Marko Šutija

345
3
9

Are you sure? did you test before posting answer – I'll-Be-Back Oct 18 '17 at 17:35
@I'll-Be-Back You are right. I'v fixed my answer. :/ – Marko Šutija Oct 18 '17 at 17:39

Update Boostrap Tooltip dynamically

2 Answers2