Bootstrap Tooltips – tooltip.js

Tooltip is small pop-up box that appears when we move the mouse pointer over on an element.  If tooltip has zero-length titles then it’s never displayed.

data-toggle=”tooltip”  – attribute use to add tooltip on any element and title attribute is use to display text inside the tootip.

<a href=”#” data-toggle=”tooltip” title=”Tooltip Example!”>move mouse on me</a>

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

<a href=”#” data-toggle=”tooltip” data-placement=”right” title=”Right Tooltip!”>right tooltip</a>
<a href=”#” data-toggle=”tooltip” data-placement=”left” title=”Left tooltip!”>Left tooltip</a>
<a href=”#” data-toggle=”tooltip” data-placement=”bottom” title=”bottom tooltip!”>bottom tooltip</a>
<a href=”#” data-toggle=”tooltip” data-placement=”top” title=”top tooltip!”>Top tooltip</a>

 

Leave a Reply

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