All Telerik .NET tools and Kendo UI JavaScript components in one package. Now enhanced with:
New to Telerik UI for ASP.NET AJAX? Download free 30-day trial
Semantic HTML elements (div, span, h6) elements and CSS3 are used.
This demo showcases the two different rendering modes of Telerik's ASP.NET Tooltip: Classic and Lightweight.
There is also a Native render mode option inherited directly from RenderMode. As RadToolTip does not have a specific HTML element, the Native render mode will have the same effect as the Classic one.
The default render mode of the control is Classic and you have the option to either explicitly set it to Lightweight or leverage the Auto mode to have the control choose the best rendering based on the user's browser.
Note: In order to provide optimal experience for your end users, we recommend that you use only one type of render mode for a control on a given page. For example, if you have two instances of RadToolTip or RadToolTipManager on the page, it will be best if both of them use the same render mode.
Note: The Material skin is available only for the modern Lightweight render mode. Change the skin or the mode to properly visualize the demonstrated control.
Notes on the statistics:* - The markup is obtained through the dev toolbar of the browser, because the popup element of the RadToolTip is created with JavaScript. The HTML that is measured is just the popup element, where there is a change in the rendering.** - The image sprite that creates the close button is loaded only if a tooltip with HideEvent=ManualClose exists.
For additional information refer to the following resources:
<%@ Page Language="vb" CodeFile="DefaultVB.aspx.vb" Inherits="Telerik.Web.Examples.Tooltip.RenderModes.DefaultVB" %> <%@ Register TagPrefix="qsf" Namespace="Telerik.QuickStart" %> <%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %> <!DOCTYPE html> <html xmlns='http://www.w3.org/1999/xhtml'> <head runat="server"> <title>Telerik ASP.NET Example</title> </head> <body> <form id="form1" runat="server"> <telerik:RadScriptManager runat="server" ID="RadScriptManager1" /> <telerik:RadSkinManager ID="RadSkinManager1" runat="server" ShowChooser="true" /> <div class="demo-container size-thin"> <a id="targetElement" href="javascript:void(0);">Hover here to show the RadToolTip</a> <telerik:RadToolTip RenderMode="Lightweight" ID="RadToolTip1" runat="server" IsClientID="true" HideEvent="ManualClose" Position="MiddleLeft" OffsetX="35" RelativeTo="Element" EnableRoundedCorners="true" TargetControlID="targetElement" EnableShadow="true" ShowEvent="OnMouseOver" Width="320px" Height="130px" VisibleOnPageLoad="true"> <asp:Literal runat="server" ID="ToolTipContent"></asp:Literal> </telerik:RadToolTip> </div> <qsf:ConfiguratorPanel runat="server" ID="ConfigurationPanel1" Title="Render mode comparison"> <Views> <qsf:View> <qsf:ConfiguratorColumn runat="server" Title="Render mode" Size="Narrow"> <asp:RadioButtonList ID="RadioButtonList1" runat="server" AutoPostBack="True" CssClass="fb-group" RepeatLayout="UnorderedList"> <asp:ListItem Value="Classic">Classic</asp:ListItem> <asp:ListItem Value="Lightweight" Selected="True">Lightweight</asp:ListItem> </asp:RadioButtonList> </qsf:ConfiguratorColumn> <qsf:ConfiguratorColumn runat="server" Title="Classic vs. Light rendering" Size="Wide"> <table class="table" cellspacing="0"> <thead> <tr> <th></th> <th>Classic</th> <th>Lightweight</th> </tr> </thead> <tbody> <tr> <th>Markup Size *</th> <td>0.83 KB </td> <td>0.32 KB </td> </tr> <tr> <th>CSS Size</th> <td>8.78 KB</td> <td>4.21 KB</td> </tr> <tr> <th>Image Sprite Size **</th> <td>2.74 KB</td> <td>0.72/2.55 KB</td> </tr> </tbody> </table> </qsf:ConfiguratorColumn> </qsf:View> </Views> </qsf:ConfiguratorPanel> </form> </body> </html>