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 3 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
Leave a Comment

(required) 

(required) 

(optional)

(required)