How to Make Bootstrap 3 Tool tips

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

How to create a bootstrap 3 tooltips

to create tooltips take a hoverable 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 are four types of position in a bootstrap 3 tooltips and they are top, bottom left and right now to make that 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>

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

Thanks for Reading

Share The Post On -