WEB DEVELOPER SITE
HTMLCSSJAVASCRIPTSQLPHPBOOTSTRAPJQUERYANGULARXML
 

Bootstrap Tooltip Plugin


The Tooltip Plugin

The Tooltip plugin is small pop-up box that appears you can control when user or client move mouse pointer over an element

Click me

How To Create a Tooltip

We can create a tooltip, add the data-toggle="tooltip" attribute to an element.

Use the title attribute to specify the text that should be displayed inside the tooltip:

<a href="#" data-toggle="tooltip" title="wow working!!">Click me</a>

The below code will enable all tooltips in the document:

Example

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

Positioning Tooltips

You can use the data-placement attribute to set the position of the tooltip on top, bottom, left or the right side of the element:

Example

<a href="#" data-toggle="tooltip" data-placement="top" title="wow working!!">Click</a>
<a href="#" data-toggle="tooltip" data-placement="bottom" title="wow working!!">Click</a>
<a href="#" data-toggle="tooltip" data-placement="left" title="wow working!!">Click</a>
<a href="#" data-toggle="tooltip" data-placement="right" title="wow working!!">Click</a>
Try it Yourself »