Usage : to use the tooltip add class tooltip to the element thats have a title. and for the tooltip position use a attribute data-placement with the position value : top,right,bottom,left
Note : for the single elements like image,input you have to wrap it inside inline or block element like a or span or div
<!-- Bottom Tooltip -->
<a href="#" class="tooltip btn" data-placement="bottom" title="Tooltip Bottom">Tooltip Bottom</a>
<!-- Top Tooltip -->
<a href="#" class="tooltip btn" data-placement="top" title="Tooltip Top">Tooltip Top</a>
<!-- Left Tooltip -->
<a href="#" class="tooltip btn" data-placement="left" title="Tooltip Left">Tooltip Left</a>
<!-- Right Tooltip -->
<a href="#" class="tooltip btn" data-placement="right" title="Tooltip Right">Tooltip Right</a>
<!-- HTML Content Tooltip -->
<a href="#" class="tooltip btn" data-placement="bottom" title="<em>Tooltip</em> <u>with</u> <b>HTML</b>">Tooltip with HTML</a>
<!-- Images Tooltip -->
<a href="#" class="tooltip" data-placement="top" title="image tooltip"><img src="images/tornado.png" alt="" width="130"></a>
<!-- Large Tooltip Content -->
<a href="#" class="tooltip large" data-placement="top" title="Lorem Ipsum is simply dummy text">Large Tooltip Content</a>
| Helper | Definition | Element |
| Attribute : data-placement | in order to position the tooltip | added to tooltip element |
| Class : large | for large tooltip content. | added to tooltip element with class |
| Class : fill | for equal the tooltip width with the element width. | added to tooltip element with class |