Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

JavaScript to Active Twitter Bootstrap Tooltips

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
like image 246
Vanessa L'olzorz Avatar asked Feb 20 '12 00:02

Vanessa L'olzorz


2 Answers

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>
like image 108
Dmitry Guyvoronsky Avatar answered Nov 11 '22 08:11

Dmitry Guyvoronsky


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
like image 26
Strelok Avatar answered Nov 11 '22 08:11

Strelok