jTip: jQuery Custom Tool Tip

Plethora of times it is required to show complex tool tip. Complex, I mean the tool tip that can contain images, links , text decoration etc...To show the custom tool tip is really impossible by using existing Java or .Net visual studio Editor.  There are many ways to implement it. 

However, I am going to describe one way to overcome this problem that is damn simpler. I have created one javascript file you just need to use that file in your page in which you wish to implement the custom tool tip and your task is done. Now, in any control you can add one custom attribute that is jtip and inside the custom attribute you can write your html or text to be shown in tool tip. In your page you just need to add the jtip.js script file and jquery.js file. Then in your page you can just use jtip property in any control. Below is one example. Say i want to display one tooltip on button which will contain one link

 

[sourcecode language="HTML"]
<script type="text\javascript" src="jquery.js"></script>
<script src="<span class=" type="text\javascript"></script>
jtip="j: my name is rupesh please visit my website <a style="cursor: hand;" href="#">My Home Page</a>" runat="server" Text="Button" />
Button1.Attributes.Add("jtip", "j: My name is rupesh....This is custom <a href='#'>ToolTip</a>");
[/sourcecode]</p>

The only thing you have to do is before writing your tool tip things just prepend it with j: (j colon). This is the only pattern that you have to follow. Below is the jTip.js code:</span></div>

[sourcecode language="javascript"]
<span style="font-size: small;">
$(function( ) {
     $("[jtip^=j:]").wrap("<span class="jtipHost">");</span>
     $(".jtipHost").hover(function(){//debugger;
     $(this)
     .append($('<span style="font-size: small;"><span style="font-size: small;">jtipcontainer">'+$(this).find("[jtip^=j:]").attr("jtip").replace('j:','')+' '))</span></span>
    .find('.jtipcontainer').css("left", $(this).position().left + 20)
    .css("top", $(this).position().top + $(this).height())
    .fadeIn(500);
 }
   , function() {//debugger;
        $(".jtipcontainer").fadeTo(400,.3, function() { $(this).remove(); });
    });
});</span></span></p>

<span style="font-size: small;"></span>[/sourcecode]

 

</div>