JavaScript to Active Twitter Bootstrap Tooltips

Question

I'm playing around with Twitter Bootstrap's Tooltips, but am having problems since they moved away from Twipsy. The correect JavaScript is included in the page.

Let's say I have the following:

<p><a href="#" rel="tooltip" data-original-title="hello">hover on me</a></p>

What is the exact JavaScript I need to use to make the tooltip appear?

Thanks in advance!

• Vanessa

Answer 1

You need to explicitly run .tooltip() for all elements that have to have tooltip. For example, this will work:

<span rel="tooltip" title="tooltip text">some text</span>
...
<script src="/js/jquery.js"></script>
<script src="/js/bootstrap.js"></script>
<script type="text/javascript">
  $(document).ready(function () {
    $("[rel=tooltip]").tooltip();
  });
</script>

Answer 2

For your example it will just be:

$('a').tooltip();

but according to the documentation, you should use the title attribute, not data-original-title. That attribute is added by Bootstrap's tooltip code. Also there is no need for rel="tooltip".

Your code should be:

HTML:

<a href="#" title="hello">hover on me</a>

JS:

$("a").tooltip(); // this will trigger a tooltip on all <a> elements