How to implement rad tooltip control in web application

• Introduction
• Features
• Some important properties
• Integration of RadTool tip with other controls
• Summary
• Conclusion

1. Introduction

         Tool tip control can display the rich content including not only text and images, but also some interactive forms with standard ASP.NET and user controls. This will allow you to create context sensitive interfaces which do not permanently occupy space on the form. The Rad Tool tip and Rad Tool tip manager are used to show rich web contents like ASP.net Controls, Ajax generated Contents etc.,

• Rad Tool tip control should be used for single elements like how the normal tool tip control that is used in labels, buttons etc.

 • Rad Tool tip manager control should be used where a collection of elements would require a tool tip i.e. data bound Controls, Calendar etc.

The only difference between these controls is the place where we implement them in the form.

2. Features

 • Load on Demand: Instead of preloading all tooltip content, the built-in ASP.NET AJAX mechanism makes it to load only after the user hovers with the mouse over the trigger element. So this is useful to show large contents in tooltip and it improves the page performance.

 • Tooltip Positioning: The position of the tooltip can be configured manually by using the properties such as; Relativeto, Position, OffsetX and OffsetY properties.

 • Content Scrolling: If the content shown in the tool tip control exceeds the control size, then the content can be scrolled horizontally and vertically.

3. Some Important properties

• TargetControl ID - the ID of the control for which the tooltip should appear on the client or the property that specifies the ID of the element that should be 'tooltipified'.

Client Side:

Server Side

 
 
• IsClient ID - True if the TargetControlID is a client id. By default, RadTooltip assumes a server ID. If the ID is client-side, as in the case where an element is pure HTML and not a server control, then the IsClient property should be set to True.

 
Server side:

• On Ajax update – event to supply the content of tool tips generated by RadToolTipManager.

 

Client side:

rad_Ajaxupdate – this function is fired when targeted control is triggered and the function is written in .vb file.

 

By using RadToolTipManager with an AjaxUpdate event handler, you keep the size of your Web page down because the content of tool tips does not have to be loaded until it is used.

• Show Events – This property helps to set the event on which the tool tip has to be shown.

For e.g. ShowEvent="OnClick" means left click on the mouse button, the targeted control tooltip will be dispayed on the form.

4. Integration of Tooltip with other controls

 

The two tool tip controls share most of the same properties. When assigned to RadToolTipManager, a property affects all of the tool tips it generates, while when assigned to RadToolTip it affects the single generated tooltip.

 • Implementation of tooltip in databound Controls

•  Add the Rad Tool Tip Manager and Data List control in the markup page; Assign the data source to Datalist.
• At the time of Item Data bound event add the target Controls and the clientID for Tooltip control.
• Two events are mandatory to fire the tool tip

              OnAjaxUpdate and UpdateToolTip

o The content shown in the tooltip control can be in the same page / form or else it can be a user control.

For e.g.

Here ’EmployeeDetail.ascx’ is a user control and it can be converted into an individual Control and it is added to a template container of the ToolTip in UpdateToolTip event Handler.

Code for adding Target controls in Item databound

 

 

lblProgramNameValue is a target Control in the datalist.

 While mouse over on the Targeted control ie.. Employee Name in the datalist, the Corresponding EmployeeID will pass through OnAjaxUpdate event handler

The OnAjaxUpdate event, Calls the function UpdateToolTip by passing EmployeeID as args.Value

• The content or control shown in tool tip should be added to ContentTemplateContainer, here we are showing dlEmployeeDetails (Datalist Contains details about Employee)

• Source assign code for dlEmployeeDetails is written in the Function MouseOver(EmployeeID)

Note:

Tooltip control works better in data bound controls when paging and sorting option is disabled; if paging option is used in Databound controls then, the target controls collection should be cleared while navigating the page else the Same ’ID’ will be passed in each page navigation. Consider the scenario - In Page 1 the 3rd count ID is “123” in Page 2 the 3rd count ID is “456”, while navigating to second page instead of “456” the ID “123” will pass through the Ajax update Function. To rectify this problem,

in Item_Command Event

Sort – sorting Function and Page – For Paging Function.

• Implementing Tooltip in Calendar control.

Implementation of Tooltip with calendar control is simpler. In Datalist control, the Target control is added in Item_DataBound, similar to that, in a Calendar control the target control is added in a Day_Render event.

For e.g.: In Day_Render Event of Calendar,

Then Call: OnAjaxUpdate and Update tooltip Event as shown in data bound controls.

Note:

If Updatepanel or Ajax panel is used for the calendar control, then the Tooltip is shown only for the current month and for the previous month or the next month, the tooltip will not be displayed. For this scenario, we have to use RadAjaxManager control to update the ToolTip controls with the calendar.

 To solve this problem follow this code below:

ClientSide:

The calendar control should be referred in AjaxSetting and AjaxUpdatedControl and the Tooltip control in AjaxUpdatedControl.

Summary

• In this blog we sawn about Basics of Radtooltip’s important properties and Features.

• Basic events of RadTooltip
• Integration of Radtooltip with Databound Control and Calendar control.

Conclusion

From this blog you are able to understand about basics of Rad Tooltip control, important properties and how to implement and integrate this control with Data bound controls and calendar control.