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