Tuesday, July 13, 2010

ToolTip - RadToolTip

RadTooltip is used as a tooltip to show aditional information that can be formatted in any way you need and, most importantly doesn't disappear after some seconds as the standard tooltip, so it is the user who decides when he/she doesn't want to see it anymore by clicking in a close button.
RadTooltip belongs to the Telerik controls family, so you will need to have it installed.


Quick example - How to use it

1. On the MouseOver event of the txtSUMSGDesc textbox, show a customized tooltip with a textarea inside of it.

The HTML code for the textboxes:


1 <td>
2 <asp:TextBox ID="txtSUMSG" runat="server" CssClass="textbox_disabled2" ReadOnly="False" MaxLength="5" width="33px" ></asp:TextBox>

3 <asp:TextBox ID="txtSUMSGDesc" CssClass="textbox_disabled2" runat="server" Width="180px" AutoPostBack="true"></asp:TextBox>

4 </td>



the HTML code for the RadToolTip

1 <telerik:RadToolTip runat="server" ID="RadToolTip1" Position="TopRight" HideEvent="ManualClose"
2 ShowEvent="OnMouseOver" Width="350px" RelativeTo="Element"

3 TargetControlID="txtSUMSGDesc" OnClientBeforeShow="CheckIfShow">

4 <table width="100%">

5 <tr>

6 <td>

7 <asp:TextBox ID="txtMessageDesc" runat="server" TextMode="MultiLine"

8 Width="300px" CssClass="MessageText"></asp:TextBox>

9 </td>

10 </tr>

11 </table>

12 </telerik:RadToolTip>


The JavaScript functions needed to show the RadToolTip (only when there is information in the textbox)

1 function HideTooltip() {
2 var tooltip =
Telerik.Web.UI.RadToolTip.getCurrent();
3 if
(tooltip) tooltip.hide();
4
}
5

6 function ShowTooltip() {
7 window.setTimeout(function
() {
8 var tooltip = $find("RadToolTip1"
);
9 //API: show the tooltip

10
tooltip.show();
11 }, 10
);
12
}
13

14 function CheckIfShow(sender, args) {
15 var Elem = document.getElementById("<%=txtSUMSGDesc.ClientID%>"
);
16 //check if summary is visible

17 if (Elem.value == ""
) {
18 //API: if there are no errors, do not show the tooltip

19 args.set_cancel(true
);
20
}
21 }

No comments:

Post a Comment