Bootstrap Tooltip

Tooltip is a small popup box which appears after any user moves the mouse pointer over an element.

To use tooltip, don’t forget to add script at the bottom of the page.
<script>
    $(document).ready(function(){
        $('[data-toggle="tooltip"]').tooltip();   
    });
</script>
Then, you can add any of these in your html depending upon in which direction you want the tooltip to move either top, bottom, left or right.

Tooltip on Top

Code Structure
<div class="container">
    <a href="#" data-toggle="tooltip" data-placement="top" title="This is tooltip.">Hover me</a>
</div>

Tooltip on Bottom

Code Structure
<div class="container">
    <a href="#" data-toggle="tooltip" data-placement="bottom" title="This is tooltip.">Hover me</a>
</div>

Tooltip on Left

Code Structure
<div class="container">
    <a href="#" data-toggle="tooltip" data-placement="left" title="This is tooltip.">Hover me</a>
</div>

Tooltip on Right

Code Structure
<div class="container">
    <a href="#" data-toggle="tooltip" data-placement="right" title="This is tooltip.">Hover me</a>
</div>

Share this

Related Posts