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