Skip to main content

Twitter Bootstrap Tooltip


Learn how to create twitter-like tooltip using Bootstrap. A tooltip that doesn't rely on images and using CSS3 for animation.

This script is very helpful if you want to display more info about the anchor link or the like.

If you have question about this code, email me at [email protected] or visit twitter bootstrap site. Thank you.

Sample code:

  1. <?php include('header.php'); ?>
  2. <body>
  3. <div class="row-fluid">
  4. <div class="span12">
  5. <div class="container"> <br>
  6. <br>
  7. <script type="text/javascript">
  8. $(document).ready(function(){
  10. $('#first').tooltip('show')
  11. $('#first').tooltip('hide')
  12. });
  13. </script>
  14. <script type="text/javascript">
  15. $(document).ready(function(){
  17. $('#second').tooltip('show')
  18. $('#second').tooltip('hide')
  19. });
  20. </script>
  21. <script type="text/javascript">
  22. $(document).ready(function(){
  24. $('#third').tooltip('show')
  25. $('#third').tooltip('hide')
  26. });
  27. </script>
  28. <script type="text/javascript">
  29. $(document).ready(function(){
  31. $('#fourth').tooltip('show')
  32. $('#fourth').tooltip('hide')
  33. });
  34. </script>
  35. Tooltip direction is a the left <a href="#" data-placement="top" id="first" data-toggle="tooltip" title="first tooltip">Top</a> <br>
  36. <br>
  37. Tooltip direction is a the left <a href="#" data-placement="left" id="second" data-toggle="tooltip" title="second tooltip">Left</a> <br>
  38. <br>
  39. Tooltip direction is a the right <a href="#" data-placement="left" id="third" data-toggle="tooltip" title="Third tooltip">right</a> <br>
  40. <br>
  41. Tooltip direction is a the right <a href="#" data-placement="bottom" id="fourth" data-toggle="tooltip" title="fourth tooltip">bottom</a> </div>
  42. </body>
  43. </html>

Note: Due to the size or complexity of this submission, the author has submitted it as a .zip file to shorten your download time. After downloading it, you will need a program like Winzip to decompress it.

Virus note: All files are scanned once-a-day by for viruses, but new viruses come out every day, so no prevention program can catch 100% of them.


1. Re-scan downloaded files using your personal virus checker before using it.
2. NEVER, EVER run compiled files (.exe's, .ocx's, .dll's etc.)--only run source code.

Add new comment

This question is for testing whether or not you are a human visitor and to prevent automated spam submissions.