Creating a Custom Tooltip Ajax Extender Control
page 4 of 7
by Abdulla Hussein AbdelHaq
Feedback
Average Rating: 
Views (Total / Last 10 Days): 34484/ 61

Behavior JavaScript File

The major goal is to extend the behavior of the ASP.NET control, so the Behavoir.js file will play a key role in that process.

As I explained in "Brief explanation about creating a new Ajax extender" section, we should create a property variable in the initializeBase function for each public property in the Extender Class, as you see in Listing 10.

Listing 10

this._toolTipText = '';
this._toolTipWidth = '200px'; 
this._toolTipBgColor = '#5E8DD0'; 
this._toolTipFontName='Verdana';
this._toolTipFontColor='White';
this._disappearDelay=250;

If you recall, we need to write a get/set client-side property for each variable, which is shown in Listing 11.

Listing 11

get_ToolTipText: function()
{
  return this._toolTipText;
}
,
set_ToolTipText: function(value)
{
  this._toolTipText = value;
}
 
, set_ToolTipWidth: function(value)
{
  this._toolTipWidth = value;
}
 
, get_ToolTipWidth: function()
{
  return this._toolTipWidth;
}
 
, set_ToolTipBgColor: function(value)
{
  this._toolTipBgColor = value;
}
 
, get_ToolTipBgColor: function()
{
  return this._toolTipBgColor;
}
 
, set_ToolTipFontName: function(value)
{
  this._toolTipFontName = value;
}
 
, get_ToolTipFontName: function()
{
  return this._toolTipFontName;
}
 
, set_ToolTipFontColor: function(value)
{
  this._toolTipFontColor = value;
}
 
, get_ToolTipFontColor: function()
{
  return this._toolTipFontColor;
}
 
, set_DisappearDelay: function(value)
{
  this._disappearDelay = value;
}
 
, get_DisappearDelay: function()
{
  return this._toolTipFontColor;
}
,

Now lets do the trick, as you can see in Listing 12, we have created a new HTML Div element in initialize function, which will be the tool tip. 

Listing 12

 var newDiv = document.createElement('div');
 newDiv.id = this.get_element().id + '_fixedtipdiv';
 newDiv.style.visibility='hidden';
 newDiv.style.width=this._toolTipWidth;
 newDiv.style.backgroundColor=this._toolTipBgColor;
 newDiv.style.fontFamily=this._toolTipFontName;
 newDiv.style.color=this._toolTipFontColor;
 newDiv.className='tooltipdiv';
 document.body.appendChild(newDiv);

We will add an event handler when the mouse is over and out of the content.

These handlers will be located at the initialize function, as you see in Listing 13.

Note that I have removed the "On" prefix word from the event name.

If you download the source code, you will see the _fixedtooltip function, and the _delayhidetip function in more details; these two JavaScript functions are responsible of show/hide the tool tip.

In addition, many JavaScript functions are responsible for creating the client-side behavior for the extender.

Listing 13

$addHandler(this.get_element(), 'mouseover',Function.createDelegate(this, 
this._fixedtooltip));
$addHandler(this.get_element(), 'mouseout', 
Function.createDelegate(this,this._delayhidetip));

Now let us test our new extender.


View Entire Article

User Comments

Title: ytu   
Name: tyu
Date: 2012-10-11 1:17:44 AM
Comment:
rtyu
Title: Mr   
Name: Mohar
Date: 2010-07-26 2:29:36 PM
Comment:
Not working for me it's giving following error:
System.InvalidOperationException: The TargetControlID of '' is not valid. The value cannot be null or empty.
Title: Mr.   
Name: Raju Balagam
Date: 2010-04-15 5:41:39 AM
Comment:
This artical helps to understand the cutom tooltip using ajax.....
Title: Good article   
Name: shailesh arban
Date: 2009-06-17 5:26:37 AM
Comment:
I gone through this article,It's very good article for those who wants to create own ajax extender.
Title: Re: 1 help ..   
Name: Abdulla [The Author]
Date: 2008-11-14 12:27:40 PM
Comment:
if you download the source code, you will find a javascript file which is the responsible for creating the tooltip, you need to change the horizontal/vertical offset in the initializeBase method into :
this.vertical_offset="-30px"
this.horizontal_offset="150px"

and if you want your code to be your more professional, you need to pass the offset of the webcontrol and calculate it with the div offset and here you will got the proper position.
Title: 1 help ..   
Name: sandeep ramani
Date: 2008-11-14 10:39:57 AM
Comment:
In above article...how i can change the position where tooltip is apearing..
i want to display tooltip not below the textbox ..but parallel to it,, so how to set that.. please tell me abt it..
Title: great article..   
Name: sandeep ramani
Date: 2008-11-14 10:20:12 AM
Comment:
this is very useful article..

it helped me a lot..

thank u very much..
Title: Good Article   
Name: Pavan
Date: 2008-10-08 2:07:31 AM
Comment:
It is a very good articles. I prefer the people to check this article before creating any ajax extenders. Thanks for the authors and contributers
Title: ms   
Name: VS2005
Date: 2008-08-08 10:13:10 AM
Comment:
Great job!!! Thank you!
Title: Re: uh. . VB/VWDEE 2008   
Name: Abdulla AbdelHaq
Date: 2008-08-06 9:01:46 AM
Comment:
Yes .. It is the same thing.
Actually, developing new Ajax Extender using VS 2008 is much easier than using VS 2005.
Title: uh. . VB/VWDEE 2008   
Name: Kevin Tweedy (KevInKauai)
Date: 2008-08-05 4:57:42 PM
Comment:
Interesting extension, but for those of us who only use VWD EE 2008 is it possible to have the implementation of this as a "done" package?

tia ... alohas ... KevInKauai
Title: Very Good   
Name: Vagueraz
Date: 2008-08-01 3:11:23 AM
Comment:
It's agreat article indeed ...
Go on Abdulla :)






Community Advice: ASP | SQL | XML | Regular Expressions | Windows


©Copyright 1998-2024 ASPAlliance.com  |  Page Processed at 2024-03-29 8:51:26 AM  AspAlliance Recent Articles RSS Feed
About ASPAlliance | Newsgroups | Advertise | Authors | Email Lists | Feedback | Link To Us | Privacy | Search