jTip: jQuery Custom Tool Tip

Posted: December 19, 2010 in ASP.Net, JavaScript, jQuery
Tags: , , ,
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
 

<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>");

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 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>

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

 

Advertisements
Comments
  1. santosh says:

    In line 2, i think you have some typo: <script src="<span class="

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s