Wednesday, June 13, 2012

Facebook like tooltip using tipsy (Html, CSS, jQuery)

Tipsy.js is a simple jQuery plugin, used to create Facebook/Twitter-like tooltip, by including an "id" into the anchor tag, to style the title attribute Those simple title boxes are gone with time, and now is the time of these cool title attributes. Here in this tutorial we will accomplish this, the easiest way.

Just include the jQuery.min (1.6 and after versions), the jQuery plugin of tipsy (tipsy.js), the tipsy_title.css and you are done. (All this is included in the script's downloadable version).

Download the Script

On your Webpage

Include the above explained scipts an stylesheet on in the head tag of your webpage, along with the below code,

<script type="text/javascript">
$(function() {
$('#fade').tipsy({fade: true});
$('#south').tipsy({gravity: 's'});
$('#east').tipsy({gravity: 'e'});
$('#west').tipsy({gravity: 'w'});
$('#south-fade').tipsy({gravity: 's', fade: true});

This script, specifies the title attribute's tooltip design,

  • If you wish, to have the tooltip above the line, use <a href="#" id="south" > </a>
  • If you want it towards left use,  id="east" , and for right use id="west" .
  • Similarly, for tooltips, which fades after some time, use the #fade , mentioned in the above code.

These are the most basic tips to, change the title attribute into a cool tooltip, using the tipsy.js . We can even include HTML codes into the tool tips. And can do a lot more with it.

For more details over the Tipsy tooltip (apart from this basic tutorial), visit

For any other query, do let us know through your comments. We love hearing from you.

No comments:

Post a Comment