How to Make Bootstrap 3 Tool tips

A tooltip is a instructiona box with small instruction which described about the functions of the tools, Bootstrap provides us a nice decorated tooltip now we are going to start tolern Bootstrap 3 Tooltip

How to create a bootstrap 3 tooltips

to create a tooltips take a hovaravle element and give there a title which will display on hover and use data-toggle="tooltip" .

Example:

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

<script>
$(document).ready(function(){
    $('[data-toggle="tooltip"]').tooltip(); 
});
</script>

Position of Bootstrap 3 tooltips:

There is four type of possition in a bootstrap 3 tooltips and they are top, bottom, left and right now to make thet use data-placement="top", data-placement="bottom", data-placement="left", data-placement="right" accordingly.

Example:

<a href="#" data-toggle="tooltip" data-placement="top" title="Hooray!">Hover</a>
<a href="#" data-toggle="tooltip" data-placement="bottom" title="Hooray!">Hover</a>
<a href="#" data-toggle="tooltip" data-placement="left" title="Hooray!">Hover</a>
<a href="#" data-toggle="tooltip" data-placement="right" title="Hooray!">Hover</a>

Inthis post we have learned about bootstrap 3 tooltip and hope it helps you, please provide your comment to make the site more usefull and better.

Thanks for Reading

Share The Post On -

Add a Comment

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

This site uses Akismet to reduce spam. Learn how your comment data is processed.