Simple Ideas To Learn How To Code
bootstrap tooltips
Bootstrap

Bootstrap Tooltips

tooltip or infotip 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.

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

 

Know more about the Bootstrap

Using Bootstrap for Tooltips

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.

bootstrap tooltip

Leave a Reply

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