CODEWITHSUNDEEP
javascriptjquerytwitter-bootstrap
I'll-Be-Back
I'll-Be-Back

Reputation: 10828

Update Boostrap Tooltip dynamically

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>

Upvotes: 0

Views: 2586

Answers (2)

Marko Šutija
Marko Šutija

Reputation: 375

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

Upvotes: -1

void
void

Reputation: 36703

.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

Upvotes: 3

Related Questions