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

Answer 3

In Bootstrap, We need to manually initialize Tooltips

its mentioned in their Documentation also.

 <script type="text/javascript">
$(function () {
    $("[data-toggle='tooltip']").tooltip();
});</script>

Answer 4

you need exactly to

  <script src="bootstrap-tooltip.js "></script>
  <script>
    $(function (){
$('a').tooltip();
 });