CJ de Vos

Programming solutions with ASP.Net

ASP.Net AJAX TooltipExtender

This article provides an ASP.Net AJAX TooltipExtender. The code and sample website can be downloaded here (TooltipWebsite.zip).

Due to the ASP.Net AjaxControlToolkit I have become very fond of small and usable components which improve overall user experience. The ControlToolkit contains - and lacks - several very usable components.

One component I would love to see would be a TooltipExtender – allowing for both static and dynamic text, allows animations and can be customized where it is required.

In an attempt to match this kind of functionality I made a TooltipExtender. The only functionality lacking is animation.

 

 

Static

 

   1:  <tt:TooltipExtender 
   2:      id="TooltipExtender1" 
   3:      TargetControlID="lblStatic" 
   4:      runat="server"
   5:      Delay="1"
   6:      Direction="Left"
   7:      TooltipWidth="300"
   8:      >
   9:      <TooltipTemplate>
  10:  Lorem ipsum dolor sit amet, consectetuer adipiscing elit. 
  11:  Ut ut nunc. Mauris et sem et est semper cursus. Ut rutrum 
  12:  dapibus nisl. Vestibulum sit amet lacus. Aliquam ut pede ut enim 
  13:  pharetra scelerisque. Sed pharetra. Etiam eget elit vel nulla 
  14:  iaculis porttitor. Sed nec quam. Sed semper gravida dolor. Nullam 
  15:  dignissim pede ac nisl. Fusce viverra pharetra quam.
  16:          <ul>
  17:              <li><a href="http://www.microsoft.com">Microsoft</a></li>
  18:              <li><a href="http://www.apple.com">Apple</a></li>
  19:          </ul>
  20:      </TooltipTemplate>
  21:  </tt:TooltipExtender>
 
Dynamic 
   1:  <tt:TooltipExtender 
   2:      Direction="Bottom" 
   3:      ServiceMethod="DynamicPopulateMethod" 
   4:      CacheDynamicResults="false" 
   5:      id="tt1" 
   6:      Delay="100"
   7:      TargetControlID="lblDynamic" 
   8:      runat="server" />

Properties

  • TargetControlID: id of target control.
  • Delay: How much ms before the item is shown (handy for webservice calls).
  • Direction: Left, Right, Top or Bottom.
  • TooltipWidth: Width of the tooltip.
  • ServiceMethod: Pagemethod for servicecall (same as other pagemethods – like from the DynamicPopulateExtender).
  • ServicePath: Path to webservice.
  • CustomScript: Method of webservice.
  • CacheDynamicResults: Should results be cached.

Cheers,

CJ.

Posted: Mar 29 2008, 09:59 PM by siets | with 8 comment(s) |
Filed under: , ,

Comments

B.Griffin said:

I d/l'ed the ZIP and it runs in its own project using ajax 10920, but after I added the tooltip to my toolbox and try to drag/drop it to a new project

using ajax 20229 (a newer version) i get an error message I screen captured and was going to include, but can't here so..

Control can not be created because Visual Studio can not find the controls type in the control assembly.

If there was a way to insert an <asp:label> in the dynamic version you wouldn't need an "in domain"

service call to update the tip. You could access its contents easily in the code-behind.

I'm still going to try and find a way to make this work.

Thanks,

Brian

# June 27, 2008 11:50 AM

lei Wulong said:

Works like a charm in .NEt 3.5 thanks,

# September 10, 2008 2:53 PM

tommy said:

How can i add image from data field in one table to the tool tip dynamically?

# November 10, 2008 2:37 AM

persistentdeveloper said:

I think it would be nice to see a brief description of 'how to use this control by registering in aspx page etc'.

Do we need to add this control to the Tool Box items?

# November 24, 2009 6:15 AM

mohammed askar said:

Simpe and nice

# February 16, 2010 3:03 PM

zouardanii said:

Hello, I've tried the component on ie6 but it doesn't work properly!

# August 18, 2010 5:37 AM

paully_21 said:

I can't seem to get it to work in Chrome...Is there something special to do to get that going?

And THANK YOU...I love the ToolTipExtender

# November 25, 2010 12:13 PM

nzstanley said:

Love to see the ToolTipExtender, but it lost the format  when used inside the UpdatePanel. Do you have quick fix somewhere?

thanks a lot.

# October 5, 2011 8:09 PM