Saturday, January 8, 2011

JQuery Tool Tip plug in Tipsy

You may found many jQuery tooltip plug in from the web. Here I am going describe the one of them which one is the best as per my opinion to use with the ASP.NET.

JQuery  Tool Tip plug in Tipsy.

You can get the more information and how it work by click over here.

Following are the Steps to use this wonder full plug in into you page.

Step 1: Download the latest Jquery library js. and Tipsy plug in js.

Step 2: Add the reference of these js file into the page header. JQuery library js must be added before the Tipsy plug in js.

Step 3: Now add the following Java script block at the end of you .aspx page.

$(document).ready(function() {
    $("*[title]").tipsy({ gravity: $.fn.tipsy.autoNS });

Step 4: You done with it. Enjoy the exiting Tool tip on your page.

NOTE: If you are going to use the partial page post back. In simple word if you are going to use update panels in you page then you have add following code into you Page_Load event.

ScriptManager.RegisterStartupScript(UpdatePanel1, GetType(), "tooltip", "$('div[class*=\"tipsy\"]').remove(); $('*[title]').tipsy({ gravity: $.fn.tipsy.autoNS });", true);

Please visit the Tipsy site to know how to change the CSS and default behaviour of the plug in to make it customize as per your need.