ASP.Net AJAX TooltipExtender

siets — Sat, 29 Mar 2008 19:59:00 GMT

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.

CJ de Vos : Tooltip

ASP.Net AJAX TooltipExtender