ToolTip - Right-to-left Support

Isolate this demo as a stand-alone application
  • About this demo
  • C#
  • VB

The RadToolTip fully supports right-to-left (RTL) language locales. The tooltips are created and added to the page as children of the body element and in order to turn on the RTL support you should set dir=rtl to the html or body elements.

Use the Tab key to move from one TextBox to the other and see how a RadToolTip which supports RTL opens on focus of the target control. Position the mouse over the Help button to recieve additional instructions.
  • Default.aspx
    • Default.aspx
    • DefaultCS.aspx
  • scripts.js
  • styles.css
<%@ Page Language="C#" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title>RTL demo page of RadTooltip</title>
        <link href="styles.css" rel="stylesheet" />
    </head>
    <body>
        <form id="form1" runat="server">
            <telerik:RadScriptManager ID="theScriptManager" runat="server" />
            <script src="scripts.js" type="text/javascript"></script>
            <telerik:RadToolTip RenderMode="Lightweight" Title="Help" runat="server" ID="RadToolTip1" HideEvent="ManualClose"
                                Width="230px" ShowEvent="onmouseover" RelativeTo="Element" Animation="Resize"
                                TargetControlID="link1" IsClientID="true" Position="TopRight" Text="Use the Tab key to move from one TextBox to the other and see how the RadToolTip opens on focus of the target control." />
            <telerik:RadToolTipManager RenderMode="Lightweight" runat="server" ID="RadToolTip5" ShowEvent="OnFocus"
                                       OnClientShow="OnClientShow" ShowDelay="100" AutoCloseDelay="5000" Width="250px"
                                       Position="MiddleRight" RelativeTo="Element">
                <TargetControls>
                    <telerik:ToolTipTargetControl TargetControlID="txtFirstName" />
                    <telerik:ToolTipTargetControl TargetControlID="txtCompany" />
                    <telerik:ToolTipTargetControl TargetControlID="txtEmail" />
                    <telerik:ToolTipTargetControl TargetControlID="txtPosition" />
                    <telerik:ToolTipTargetControl TargetControlID="txtAddress" />
                </TargetControls>
            </telerik:RadToolTipManager>
            <div class="reg-container">
                <a href="#">
                    <img src="../ShowEvent/images/help.gif" id="link1" class="help-link" alt="Help link" />
                </a>
                <table class="reg-table">
                    <tr>
                        <td>
                            <asp:Label ID="lblFirstName" runat="server" Text="Name: "></asp:Label>
                        </td>
                        <td>
                            <asp:TextBox ID="txtFirstName" onfocus="Hilite(this)" onblur="Hilite(this, false)"
                                         TabIndex="1" runat="server" ToolTip="Please, fill in first name, familiy name and any other initials or titles."></asp:TextBox>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <asp:Label ID="lblCompany" runat="server" Text="Company: "></asp:Label>
                        </td>
                        <td>
                            <asp:TextBox ID="txtCompany" TabIndex="2" runat="server" onfocus="Hilite(this)" onblur="Hilite(this, false)"
                                         ToolTip="Company name should be spelled out with proper capitalization."></asp:TextBox>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <asp:Label ID="lblEmail" runat="server" Text="E-mail: "></asp:Label>
                        </td>
                        <td>
                            <asp:TextBox ID="txtEmail" TabIndex="3" runat="server" onfocus="Hilite(this)" onblur="Hilite(this, false)"
                                         ToolTip="It is possible to list more than one email, separated by comma."></asp:TextBox>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <asp:Label ID="lblPosition" runat="server" Text="Position: "></asp:Label>
                        </td>
                        <td>
                            <asp:TextBox ID="txtPosition" TabIndex="4" runat="server" onfocus="Hilite(this)"
                                         onblur="Hilite(this, false)" ToolTip="Please list current position, followed by previous positions at the company, separated by commas."></asp:TextBox>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <asp:Label ID="lblAddress" runat="server" Text="Address: "></asp:Label>
                        </td>
                        <td>
                            <asp:TextBox ID="txtAddress" TabIndex="5" runat="server" onfocus="Hilite(this)" onblur="Hilite(this, false)"
                                         ToolTip="Your current mail address."></asp:TextBox>
                        </td>
                    </tr>
                    <tr>
                        <td>
                        </td>
                        <td>
                            <asp:Button ID="btnSubmit" Text="Submit" runat="server" />
                        </td>
                    </tr>
                </table>
            </div>
        </form>
    </body>
</html>

Find Assistance

Help Us Improve

Was this example helpful?