New to Telerik UI for ASP.NET AJAX? Download free 30-day trial

WAI-ARIA Support

Separate RadToolTips:

  *

RadToolTipManager and autotooltipify:

User Name
Password

The RadToolTip control has WAI-ARIA support which can be easily enabled by setting EnableAriaSupport="true"

Please, note that an issue with the use of WAI-ARIA in HTML documents is that they don’t validate. When you run a HTML document containing ARIA attributes through the W3C Validator it shows errors in the results for any ARIA attributes. The HTML 4.01 specification and its DOCTYPE declarations (DTD) Strict, Transitional, Frameset , do not include any information about the WAI ARIA attributes and you cannot have a valid HTML 4.01 document which includes, elements, attributes, and attribute values, not detailed in its DTD’s. Thus, the WAI-ARIA attributes for the elements on the page (a required input and a table used for layout) are applied via JavaScript

Note: Note, that in order to have the screen readers read the tooltip content, it should be loaded before the target is hovered. That is why when the RadToolTipManager uses Load On Demand, even if the WAI-ARIA support is enabled, it will not work for the first hover because if we load the content in advance, this will defy the purpose of using Load On Demand.

  • DefaultCS.aspx
  • scripts.js
  • Styles.css
<%@ Page Language="c#"  %>

<!DOCTYPE html>
<html xmlns='http://www.w3.org/1999/xhtml'>
<head runat="server">
    <title>Telerik ASP.NET Example</title>
    <link href="styles.css" rel="stylesheet" type="text/css" />
    <script src="scripts.js" type="text/javascript"></script>
</head>
<body>
    <form id="form1" runat="server">
    <telerik:RadScriptManager runat="server" ID="RadScriptManager1" />
    <telerik:RadSkinManager ID="RadSkinManager1" runat="server" ShowChooser="true" />
    <div class="demo-containers">
        <div class="demo-container size-thin">
            <div class="contentDiv">
                <h4>Separate RadToolTips:</h4>
                <div style="margin-top: 20px;">
                    <label id="firstNameLabel" for="firstName">
                        First Name</label>
                    <input type="text" name="first-name" id="firstName" />
                </div>
                <div>
                    <label for="lastName">
                        Last Name</label>
                    <input type="text" name="last-name" id="lastName" />
                </div>
                <div>
                    <label for="email">
                        Email</label>
                    <input type="text" name="email" id="email" />&nbsp;&nbsp;&#42;
                </div>
                <div>
                    <label for="userName">
                        User Name</label>
                    <input type="text" name="uName" id="userName" />
                </div>
            </div>
        </div>
        <telerik:RadToolTip RenderMode="Lightweight" ID="RadToolTip4" runat="server" RelativeTo="Element"
            Text="Please, enter your first name!" TargetControlID="firstName" IsClientID="true"
            Position="MiddleRight" EnableAriaSupport="true">
        </telerik:RadToolTip>
        <telerik:RadToolTip RenderMode="Lightweight" ID="RadToolTip1" runat="server" RelativeTo="Element"
            Text="Please, enter your last name!" TargetControlID="lastName" IsClientID="true"
            Position="MiddleRight" EnableAriaSupport="true">
        </telerik:RadToolTip>
        <telerik:RadToolTip RenderMode="Lightweight" ID="RadToolTip2" runat="server" RelativeTo="Element"
            Text="Entering your email is required!" TargetControlID="email" IsClientID="true"
            Position="MiddleRight" EnableAriaSupport="true">
        </telerik:RadToolTip>
        <telerik:RadToolTip RenderMode="Lightweight" ID="RadToolTip3" runat="server" RelativeTo="Element"
            Text="Please, enter your user name!" TargetControlID="userName" IsClientID="true"
            Position="MiddleRight" EnableAriaSupport="true">
        </telerik:RadToolTip>
        <div class="demo-container size-thin">
            <div id="ttZone" style="padding-top: 10px">
                <h4>RadToolTipManager and autotooltipify:</h4>
                <table class="layoutTable" style="width: 120px; height: 130px; border-collapse: collapse;">
                    <tr>
                        <td>
                            <span>User Name</span>
                            <asp:TextBox ID="TextBox1" runat="server" ToolTip="Enter your user name"></asp:TextBox>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <span>Password</span>
                            <asp:TextBox ID="TextBox3" runat="server" ToolTip="Enter your password" TextMode="Password"></asp:TextBox>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <asp:Button ID="Button5" runat="server" Text="Submit" ToolTip="Submit your data"></asp:Button>
                        </td>
                    </tr>
                </table>
            </div>
        </div>
    </div>
    <telerik:RadToolTipManager RenderMode="Lightweight" ID="RadToolTipManager1" runat="server" RelativeTo="Element"
        AutoTooltipify="true" ContentScrolling="Default" ToolTipZoneID="ttZone" EnableAriaSupport="true"
        Position="MiddleRight">
    </telerik:RadToolTipManager>
    </form>
</body>
</html>

Support & Learning Resources

Find Assistance