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

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();
 });