Better and Flexible Tooltip using LiteTooltip.js

Tooltip is a kind of making big thing into simple. Hide all the data inside it and on hover show all the information about the something by using tooltip, most of the tooltips are not hoverable but here we can hover the tooltip and it can be used for database fetch, and we can show all kind of details in the database. that's why tooltip is more useful and looking very nice to see in your page.. Let's see detail things about this tooltip.

DOWNLOAD CODE         LIVE DEMO

Here we are using javascript tooltip so it has more functions within it. Let's see about all this.

We can locate it all side such as.

data-location="top  | top-left | top-right

right |right-top | right-bottom

left |left-top |left-bottom

bottom |bottom-left | bottom-right"

and here it has time to show the tooltip

data-delay=”1000” /* 1000ms=1sec 

and also it has trigger functionalities.

data-trigger="click | hover | hoverable | focus"

Program

<table id="tbl_locations" class="table1" style="width: 800px; margin: 0px auto">  
<tbody>  
<tr> 
<td>
<a href="#" data-title="top-left" data-location="top-left">top-left</a>
</td>  
<td>
<a href="#" data-title="top" data-location="top">top</a>
</td>  
<td>
<a href="#" data-title="top-right" data-location="top-right">top-right</a>
</td>  
</tr> 
<tr> 
<td>
<a href="#" data-title="left-top<br />hellow 2my4edge,<br /> 
<a href='http://www.2my4edge.blogspot.com' target='_blank'>Click here</a>" data-trigger="hoverable" data-location="left-top" >left-top</a>
</td>  
<td>
<a href="#" data-title="right-top<br /><br />2my4edge<br />Arunkumar Maha.
<a href='http://www.2my4edge.blogspot.com' target='_blank'>Click here</a>" data-trigger="hoverable" data-location="right-top">right-top</a>
</td>  
</tr>  
<tr>  
<td>
<a href="#" data-title="left" data-location="left">left</a>
</td> 
<td>
</td>  
<td>
<a href="#" data-title="right" data-location="right">right</a>
</td> 
</tr> 
</tbody> 
</table>  

in the above program, we used table for use the different kind of tooltip to show. like the above instruction.

Javascript

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <script type="text/javascript" src="tooltip.js" ></script>
 
 <script type="text/javascript">
        $("#tbl_locations a").LiteTooltip({ textalign: 'left', trigger: 'hover' });
        $("#tbl_triggers a").LiteTooltip({ textalign: 'left' });
        $("#tbl_triggers input").LiteTooltip({ textalign: 'left' });        
    </script>

that is the above is the script for the tooltip, just call the id of table field. and the above ins.
that's it. try the demo.

RELATED POSTS:

Simple concept for Select All text OnClick in textarea

Create custom file chosen input type using Css and Jquery

Marquee style in different manner with PHP and MySql

Image Zoommer like E-commerce site using multizoom.js

Print or Save the Web page as .PDF Using Java Script

Make Bookmark / Favorites page using Java Script

Choose state and city based on country using Jquery

Toggle Show/hide concept using java script

Floating menu using Jquery plugin