1. Other
  2. Twitter Bootstrap Tooltip

Twitter Bootstrap Tooltip

Submitted by jkev on Monday, May 13, 2013 - 09:46.
Language
Other
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(){
  9.                                
  10.                         $('#first').tooltip('show')
  11.                         $('#first').tooltip('hide')
  12.                 });
  13.         </script>
  14.         <script type="text/javascript">
  15.                 $(document).ready(function(){
  16.                                
  17.                         $('#second').tooltip('show')
  18.                         $('#second').tooltip('hide')
  19.                 });
  20.         </script>
  21.         <script type="text/javascript">
  22.                 $(document).ready(function(){
  23.                                
  24.                         $('#third').tooltip('show')
  25.                         $('#third').tooltip('hide')
  26.                 });
  27.         </script>
  28.         <script type="text/javascript">
  29.                 $(document).ready(function(){
  30.                                
  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 SourceCodester.com for viruses, but new viruses come out every day, so no prevention program can catch 100% of them.

FOR YOUR OWN SAFETY, PLEASE:

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.

Tags
Twitter Bootstrap Tooltip
Javascript
jQuery

Add new comment

About text formats
  • 24 views