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.