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.

7 Comments

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

  • Works like a charm in .NEt 3.5 thanks,

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

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

  • Simpe and nice

  • 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

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

    thanks a lot.

Comments have been disabled for this content.