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

Animation

  • Demo Configurator

  • Animation type

  • ToolTip positionTop Right

This example demonstrates showing and hiding a tooltip with animation effects. RadToolTip provides four types of animations - Fade, Resize, Slide and FlyIn. By default RadToolTip appears without animation effects. The property setting the type of animation is Animation.

  • DefaultCS.aspx
  • DefaultCS.aspx.cs
<%@ Page Language="c#" CodeFile="DefaultCS.aspx.cs" Inherits="Telerik.Web.Examples.ToolTip.Animation.DefaultCS" %>

<!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" />
    <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">
        <AjaxSettings>
            <telerik:AjaxSetting AjaxControlID="AnimationSelector">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="ConfigurationPanel1" LoadingPanelID="RadAjaxLoadingPanel1" />
                    <telerik:AjaxUpdatedControl ControlID="RadToolTip1" />
                </UpdatedControls>
            </telerik:AjaxSetting>
            <telerik:AjaxSetting AjaxControlID="Position">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="ConfigurationPanel1" LoadingPanelID="RadAjaxLoadingPanel1" />
                    <telerik:AjaxUpdatedControl ControlID="RadToolTip1" />
                </UpdatedControls>
            </telerik:AjaxSetting>
        </AjaxSettings>
    </telerik:RadAjaxManager>
    <telerik:RadAjaxLoadingPanel runat="server" ID="RadAjaxLoadingPanel1" />
    <div class="demo-container size-thin">
        <a id="link1" href="#">Show RadToolTip</a>
    </div>
    <div id="localZone">
        <telerik:RadToolTip RenderMode="Lightweight" runat="server" ID="RadToolTip1" RelativeTo="Element" Width="390px"
            Height="70px" TargetControlID="link1" IsClientID="true" Animation="Fade" Position="TopRight">
            <img src="../../../ToolTip/images/ToolTip.png" alt="&nbsp;" />
        </telerik:RadToolTip>
    </div>
    <qsf:ConfiguratorPanel ID="ConfigurationPanel1" runat="server">
        <Views>
            <qsf:View>
                <qsf:ConfiguratorColumn runat="server" Size="Narrow">
                    <ul class="fb-group">
                        <li>
                            <qsf:RadioButtonList Label="Animation type" AutoPostBack="true" ID="AnimationSelector" runat="server" OnSelectedIndexChanged="AnimationSelector_SelectedIndexChanged">
                                <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>
                            </qsf:RadioButtonList>
                        </li>
                    </ul>
                </qsf:ConfiguratorColumn>
                <qsf:ConfiguratorColumn runat="server" Size="Narrow">
                    <ul class="fb-group">
                        <li>
                            <qsf:DropDownList Label="ToolTip position" runat="server" ID="Position" AutoPostBack="true" OnSelectedIndexChanged="Position_SelectedIndexChanged" Width="200px">
                                <Items>
                                    <telerik:DropDownListItem Value="TopLeft" Text="Top Left"></telerik:DropDownListItem>
                                    <telerik:DropDownListItem Value="TopCenter" Text="Top Center"></telerik:DropDownListItem>
                                    <telerik:DropDownListItem Value="TopRight" Selected="true" Text="Top Right"></telerik:DropDownListItem>
                                    <telerik:DropDownListItem Value="MiddleLeft" Text="Middle Left"></telerik:DropDownListItem>
                                    <telerik:DropDownListItem Value="Center" Text="Center"></telerik:DropDownListItem>
                                    <telerik:DropDownListItem Value="MiddleRight" Text="Middle Right"></telerik:DropDownListItem>
                                    <telerik:DropDownListItem Value="BottomLeft" Text="Bottom Left"></telerik:DropDownListItem>
                                    <telerik:DropDownListItem Value="BottomCenter" Text="Bottom Center"></telerik:DropDownListItem>
                                    <telerik:DropDownListItem Value="BottomRight" Text="Bottom Right"></telerik:DropDownListItem>
                                </Items>
                            </qsf:DropDownList>
                        </li>
                    </ul>
                </qsf:ConfiguratorColumn>
            </qsf:View>
        </Views>
    </qsf:ConfiguratorPanel>
    </form>
</body>
</html>

Support & Learning Resources

Find Assistance