Bootstrap Tooltip

Bootstrap Tooltips are useful when We need to describe a link. The plugin was inspired by jQuery.tipsy plugin written by Jason Frame. Bootstrap Tooltips have since been updated to work without images, animate with a CSS animation, and data-attributes for local title storage.

Creating Bootstrap Tooltip:

A bootstrap tooltip is a small pop-up that appears when user places the mouse pointer over an element such as link or buttons to provide hint or information about the element being hovered.
Tooltips can be very helpful for the new visitors of Wer website because they enable the user to know the purpose of icons and links by placing the mouse pointer over them.

Via data attributes: To add a tooltip, add data-toggle=”tooltip” to an anchor tag. The title of the anchor will be the text of a tooltip. By default, tooltip is set to top by the plugin.

<a href="#" data-toggle="tooltip" title="Example tooltip">Hover over me</a>

Via JavaScript: Trigger the tooltip via JavaScript:

$('#identifier').tooltip(options)

Tooltip plugin is NOT only-css plugins like dropdown or other plugins discussed in previous chapters. To use this plugin We MUST activate it using jquery (read javascript). To enable all the tooltips on Wer page just use this script:

$(function () { $("[data-toggle='tooltip']").tooltip(); });

EXAMPLE
The following example demonstrates the use of tooltip plugin via data attributes.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>Bootstrap, from Twitter</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="" />
    <meta name="author" content="" />
    <!-- Le styles -->
    <link data-require="bootstrap-css" data-semver="3.1.1" rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" />
    <style>
      body {
        padding-top: 60px;
      }
      @media (max-width: 979px) {
        /* Remove any padding from the body */
        body {
          padding-top: 0;
        }
      }
    </style>
    <link href="style.css" rel="stylesheet" />
    <!-- Le HTML5 shim, for IE6-8 support of HTML5 elements -->
    <!--[if lt IE 9]>
      <script src="//html5shim.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->
    <!-- Le fav and touch icons -->
    <link rel="shortcut icon" href="images/favicon.ico" />
    <link rel="apple-touch-icon" href="images/apple-touch-icon.png" />
    <link rel="apple-touch-icon" sizes="72x72" href="images/apple-touch-icon-72x72.png" />
    <link rel="apple-touch-icon" sizes="114x114" href="images/apple-touch-icon-114x114.png" />
    <!-- Le javascript
    ================================================== -->
    <script data-require="jquery" data-semver="2.0.3" src="http://code.jquery.com/jquery-2.0.3.min.js"></script>
    <script data-require="bootstrap" data-semver="3.1.1" src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
    <script src="script.js"></script>
  </head>
  <body>
<h4>Tooltip examples for anchors</h4>
This is a <a href="#" class="tooltip-test" data-toggle="tooltip" 
   title="Default Tooltip">
   Default Tooltip
</a>.
<br>
<h4>Tooltip examples for buttons</h4>
<button type="button" class="btn btn-default" data-toggle="tooltip" 
   title="Default Tooltip">
   Default Tooltip
</button>
<script>
   $(function () { $("[data-toggle='tooltip']").tooltip(); });
</script>
  </body>
</html> 

Setting the Position of Tooltips:

We can set tooltips to appear on top, right, bottom and left sides of an element. In the below example is just a continuation of the previous example of bootstrap tooltip. In this sample code we have changed some codes under the script tag, which made difference in the output which we will see in the image.

<h4>Tooltip examples for anchors</h4>
This is a <a href="#" class="tooltip-test" data-toggle="tooltip" 
   title="Default Tooltip">
   Default Tooltip
</a>.
<br>
<h4>Tooltip examples for buttons</h4>
<button type="button" class="btn btn-default" data-toggle="tooltip" 
   title="Default Tooltip">
   Default Tooltip
</button>
<script>
   $(".tooltip-test").tooltip({
        placement : 'right'
    });
</script> 

bootstrap tooltip

 

In the above article we have discussed about what bootstrap tooltip is, and how to create one. Bootstrap tooltip also have some options and methods, which we will discuss next.

If you find this article helpful, you can connect us in Google+ and Twitter.

Leave a Reply

Your email address will not be published. Required fields are marked *