Simple Ideas To Learn How To Code
bootstrap tooltips
Bootstrap

How to use Bootstrap Tooltips

tooltip or info tip is a common graphical user interface element when used in conjunction with a cursor, usually a pointer. The user hovers the pointer over an item, and a tooltip may appear a small “hover box” which provide hint or information about the item being hovered over. So, in this post, learn how to use bootstrap tooltips.

This will be helpful for the website visitor and it will be quicker as well since the page doesn’t need to be refreshed.

Also, read: Accelerated Mobile Pages

Know more about the Bootstrap

How to use Bootstrap Tooltips?

let’s start to create a new file called as index.html and load up all the required jquery and bootstrap file in the <head> section of the webpage.

<head>
<link rel="stylesheet"
 href="http://netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css">
<link rel="stylesheet"
 href="http://netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap-theme.min.css">
<script src="http://code.jquery.com/jquery.min.js"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.0/js/bootstrap.min.js"></script>
</head>

Now, you need to use the element where you want to use tooltip, you need to do this inside <body>

<body>
       <div class="container">
             <button type="button" class="btn btn-default" id="top" data-toggle="tooltip"
 data-placement="top" title="Tooltip">Tooltip on top</button> 
      </div>
</body>

After this, we need to use jQuery so make our tooltip works on your website. For this, you need to define the jquery as below. You can put this just before </body> inorder to increase the speed of the website.

<script>
$(document).ready(function(){
       $("#top").tooltip({ placement : 'top'
    });
});
</script>

Open up your browser and type in index.html, you can see the button and when you hover you can see tooltip on it.

How to use Bootstrap Tooltips

Leave a Reply

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