Bootstrap tooltips not working

Solution 1:

To sum up: activate your tooltips using jQuery selectors

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

In fact, you don't need to use the attribute selector, you can invoke it on any element even if it doesn't have rel="tooltip" in its tag.

Solution 2:

After experiencing the same problem, I found this solution worked without having to add additional tag attributes outside of the Bootstrap required attributes.

HTML

<a href="#" data-toggle="tooltip" title="Title Here">Hyperlink Text</a>

JQuery

$(document).ready(function() {
    $("body").tooltip({ selector: '[data-toggle=tooltip]' });
});

Hope this helps!

Solution 3:

You don't need all js files separately

Just use the following files if you are going to use all bootstrap functions:

-bootstrap.css
-bootstrap.js

both of them can be found in http://twitter.github.com
and finally
-Latest version of jquery.js

For Glyphicons you need the image

glyphicons-halfings.png and/or glyphicons-halfings-white.png(white coloured images)
which you need to upload inside /img/ folder of your website (or) store it where ever you want but change the folder directory inside the bootstrap.css

For tooltip you need the following script inside your <head> </head> tag

  <script type='text/javascript'>
     $(document).ready(function () {
     if ($("[rel=tooltip]").length) {
     $("[rel=tooltip]").tooltip();
     }
   });
  </script>

That's it...

Bootstrap tooltips not working

Solution 1:

Solution 2:

Solution 3:

Related

Recent Posts