Animation
<%@ Page Language="c#" CodeFile="DefaultCS.aspx.cs" Inherits="Telerik.Web.Examples.ToolTip.Animation.DefaultCS" %><%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %><%@ Register TagPrefix="qsf" Namespace="Telerik.QuickStart" %><%@ Register TagPrefix="qsf" TagName="Header" Src="~/Common/Header.ascx" %><%@ Register TagPrefix="qsf" TagName="HeadTag" Src="~/Common/HeadTag.ascx" %><%@ Register TagPrefix="qsf" TagName="Footer" Src="~/Common/Footer.ascx" %><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head runat="server"> <qsf:HeadTag ID="Headtag1" runat="server" /></head><body class="BODY"> <form id="Form1" method="post" runat="server"> <qsf:Header ID="Header1" runat="server" NavigationLanguage="c#" /> <telerik:RadScriptManager ID="RadScriptManager1" runat="server"> </telerik:RadScriptManager> <div class="bigModule" style="margin-bottom: 40px"> <div class="bigModuleBottom"> This example demonstrates showing and hiding a tooltip with animation effects: </div> </div> <div class="module" style="width: 400px; margin-top: 18px; margin-bottom: 30px;"> <br /> Lorem ipsum dolor sit amet, <a id="link1" href="#">consectetuer</a> <br /> <br /> </div> <telerik:RadFormDecorator ID="RadFormDecorator1" runat="server" DecoratedControls="RadioButtons" /> <qsf:ConfiguratorPanel runat="server" ID="ConfigurationPanel1" Enabled="true" Title="Configure tooltips" Expanded="true" Width="530"> <div style="float: left;"> Choose the animation type: <asp:RadioButtonList AutoPostBack="true" Width="50px" ID="AnimationSelector" runat="server" OnSelectedIndexChanged="AnimationSelector_SelectedIndexChanged" Style="width: 150px; margin-top: 30px;"> <asp:ListItem Text="None" Value="None"></asp:ListItem> <asp:ListItem Selected="True" Text="Fade" Value="Fade"></asp:ListItem> <asp:ListItem Text="Resize" Value="Resize"></asp:ListItem> <asp:ListItem Text="Slide" Value="Slide"></asp:ListItem> <asp:ListItem Text="FlyIn" Value="FlyIn"></asp:ListItem> </asp:RadioButtonList> </div> <div style="float: right"> Choose the ToolTip position: <asp:RadioButtonList runat="server" ID="Position" Style="width: 150px; margin-top: 30px;" AutoPostBack="true" OnSelectedIndexChanged="Position_SelectedIndexChanged"> <asp:ListItem Value="TopLeft">Top Left</asp:ListItem> <asp:ListItem Value="TopCenter">Top Center</asp:ListItem> <asp:ListItem Value="TopRight" Selected="true">Top Right</asp:ListItem> <asp:ListItem Value="MiddleLeft">Middle Left</asp:ListItem> <asp:ListItem Value="Center">Center</asp:ListItem> <asp:ListItem Value="MiddleRight">Middle Right</asp:ListItem> <asp:ListItem Value="BottomLeft">Bottom Left</asp:ListItem> <asp:ListItem Value="BottomCenter">Bottom Center</asp:ListItem> <asp:ListItem Value="BottomRight">Bottom Right</asp:ListItem> </asp:RadioButtonList> </div> </qsf:ConfiguratorPanel> <telerik:RadToolTip runat="server" ID="RadToolTip1" RelativeTo="Element" Width="390px" Height="70px" TargetControlID="link1" IsClientID="true" Animation="Fade" EnableShadow="true" Position="TopRight"> <img src="../../../ToolTip/Img/ToolTip.png" alt=" " /> </telerik:RadToolTip> <qsf:Footer runat="server" ID="Footer1" /> </form></body></html>
Take your time to truly experience the power of RadControls for ASP.NET AJAX with a free 60-day trial backed up by Telerik’s unlimited dedicated support.
Download your RadControls for ASP.NET AJAX trial and jumpstart your development with the available Getting Started resources.
If you have any questions, do not hesitate to contact us at sales@telerik.com.