CODEWITHSUNDEEP
javascripttwitter-bootstraptooltip
Olle Härstedt
Olle Härstedt

Reputation: 4020

Changing Bootstrap tooltip content when shown

Is there any way to change the content of a Bootstrap tooltip when the tooltip is showing?

$('.tooltip-inner').html(myContent);

is not good enough, since I have a number of tooltips on the page.

Preferably, I'd want the ID of the tooltip div (generated by Bootstrap), but it's changing every time it's shown.

The use-case is a small HTML game, where tooltips are used for showing resources in real-time.

Edit: Current solution: Define a variable toggle, set it to true when tooltips is shown and false when hidden using the Bootstrap tooltip events. Use $('.tooltip-content').html(content) when toggle is true.

Upvotes: 0

Views: 1694

Answers (2)

Kenny
Kenny

Reputation: 2186

I was able to get the tooltip to update using this:

$('#el').attr('data-original-title', 'New text').tooltip();

Nothing else I found online helped until I found this post and saw the answer from divy3993, which also didn't work, but got me close enough to figure out what would.

Upvotes: 2

divy3993
divy3993

Reputation: 5810

I think what you need is to change title attribute before tooltip show up.

Check below example.

$(document).ready(function() {
  var newValue = "This does change huh..";
  $('[data-toggle="tooltip"]').attr('title', newValue).tooltip();
});
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<div class="container">
  <h3>Tooltip Example</h3>
  <a href="#" data-toggle="tooltip" title="Hooray!">Hover over me</a>
</div>

Upvotes: 1

Related Questions