<%@ Page Language="vb" AutoEventWireup="true" CodeFile="DefaultVB.aspx.vb" Inherits="Telerik.Web.Examples.ToolTip.Overview.DefaultVB" %>
<%@ Register TagPrefix="qsf" Namespace="Telerik.QuickStart" %>
<%@ Register Src="ProductDetails.ascx" TagName="ProductDetails" TagPrefix="uc1" %>
<%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
<%@ Register Src="~/ToolTip/Examples/Overview/Info.ascx" TagName="Info" TagPrefix="qsf" %>
<!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>
<title>ASP.NET AJAX ToolTip Demo | RadToolTip control</title>
<link rel="stylesheet" type="text/css" href="styles.css" />
</head>
<body>
<form id="form1" runat="server">
<telerik:RadScriptManager runat="server" ID="RadScriptManager1" />
<telerik:RadSkinManager ID="QsfSkinManager" runat="server" ShowChooser="true" />
<telerik:RadFormDecorator ID="QsfFromDecorator" runat="server" DecoratedControls="All" EnableRoundedCorners="false" />
<div class="bigModule" style="margin-bottom: 40px">
<div class="bigModuleBottom">
Put the mouse overeach of the images below to show a RadToolTip which displays detailed
information about the particular product.
</div>
</div>
<div style="padding: 40px 0 0 40px; float: left; width: 482px; height: 525px; background: url('bgr.gif') no-repeat;">
<telerik:RadToolTipManager runat="server" AnimationDuration="300" ShowDelay="200"
HideDelay="1" ID="RadToolTipManager1" Width="480px" Height="227px" RelativeTo="Element"
Animation="Slide" Position="BottomCenter" OnAjaxUpdate="OnAjaxUpdate" Skin="Telerik">
</telerik:RadToolTipManager>
<asp:Repeater runat="server" ID="Repeater1" DataSourceID="SqlDataSource1" OnItemDataBound="repeater1_ItemDataBound">
<ItemTemplate>
<div style="border: 1px solid #999999; float: left; margin: 3px; width: 125px; height: 125px;
background-image: url('<%# Eval("ProductID", "../../../Img/Northwind/Products/{0}.jpg") %>');">
<div runat="server" id="smallImage" style="width: 125px; height: 125px; background-position: center;
background-repeat: no-repeat;">
</div>
</div>
</ItemTemplate>
</asp:Repeater>
</div>
<asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:NorthwindConnectionString %>"
ProviderName="System.Data.SqlClient" SelectCommand="SELECT TOP(9) [ProductID], [ProductName], [SupplierID], [CategoryID], [QuantityPerUnit], [UnitPrice], [UnitsInStock], [UnitsOnOrder], [ReorderLevel], [Discontinued] FROM [Products] WHERE ([CategoryID] = @CategoryID)">
<SelectParameters>
<asp:Parameter DefaultValue="8" Name="CategoryID" Type="Int32"></asp:Parameter>
</SelectParameters>
</asp:SqlDataSource>
<div style="padding-top: 10px;">
<qsf:ConfiguratorPanel runat="server" ID="ConfigurationPanel1" Enabled="true" Title="Configure tooltips"
Expanded="true" CssClass="configurator" HorizontalAlign="Left" Width="320">
<ul class="config">
<li><span class="title">Animation </span>
<asp:DropDownList runat="server" ID="Animation" Style="width: 150px;">
<asp:ListItem Value="0">None</asp:ListItem>
<asp:ListItem Value="1">Resize</asp:ListItem>
<asp:ListItem Value="2">Fade</asp:ListItem>
<asp:ListItem Selected="true" Value="4">Slide</asp:ListItem>
<asp:ListItem Value="8">FlyIn</asp:ListItem>
</asp:DropDownList>
</li>
<li><span class="title">AnimationDuration</span>
<telerik:RadNumericTextBox MinValue="0" runat="server" EnabledStyle-HorizontalAlign="Right"
Width="150" ID="AnimationDuration" NumberFormat-DecimalDigits="0" AllowOutOfRangeAutoCorrect="true">
</telerik:RadNumericTextBox></li>
<li><span class="title">Position </span>
<asp:DropDownList runat="server" ID="Position" Style="width: 150px;">
<asp:ListItem Value="TopLeft">Top Left</asp:ListItem>
<asp:ListItem Value="TopCenter">Top Center</asp:ListItem>
<asp:ListItem Value="TopRight">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 Selected="true" Value="BottomCenter">Bottom Center</asp:ListItem>
<asp:ListItem Value="BottomRight">Bottom Right</asp:ListItem>
</asp:DropDownList>
</li>
<li><span class="title">RelativeTo</span>
<asp:DropDownList runat="server" ID="RelativeTo" Style="width: 150px;">
<asp:ListItem Value="Mouse">Mouse</asp:ListItem>
<asp:ListItem Selected="true" Value="Element">Element</asp:ListItem>
<asp:ListItem Value="BrowserWindow">BrowserWindow</asp:ListItem>
</asp:DropDownList>
</li>
<li><span class="title">ShowEvent</span>
<asp:DropDownList runat="server" ID="ShowEvent" Style="width: 150px;">
<asp:ListItem Selected="true" Value="OnMouseOver">OnMouseOver</asp:ListItem>
<asp:ListItem Value="OnClick">OnClick</asp:ListItem>
<asp:ListItem Value="OnRightClick">OnRightClick</asp:ListItem>
<asp:ListItem Value="OnFocus">OnFocus</asp:ListItem>
</asp:DropDownList>
</li>
<li><span class="title">ContentScrolling</span>
<asp:DropDownList runat="server" ID="ContentScrolling" Style="width: 150px;">
<asp:ListItem Value="Default" Selected="true">Default</asp:ListItem>
<asp:ListItem Value="Auto">Auto</asp:ListItem>
<asp:ListItem Value="None">None</asp:ListItem>
<asp:ListItem Value="X">X</asp:ListItem>
<asp:ListItem Value="Y">Y</asp:ListItem>
<asp:ListItem Value="Both">Both</asp:ListItem>
</asp:DropDownList>
</li>
<li><span class="title">HideEvent</span>
<asp:DropDownList runat="server" ID="HideEvent" Style="width: 150px;">
<asp:ListItem Selected="true" Value="Default">Default</asp:ListItem>
<asp:ListItem Value="FromCode">FromCode</asp:ListItem>
<asp:ListItem Value="LeaveTargetAndToolTip">LeaveTargetAndToolTip</asp:ListItem>
<asp:ListItem Value="LeaveToolTip">LeaveToolTip</asp:ListItem>
<asp:ListItem Value="ManualClose">ManualClose</asp:ListItem>
</asp:DropDownList>
</li>
<li><span class="title">RenderMode</span>
<asp:DropDownList runat="server" ID="RenderMode" Style="width: 150px;">
<asp:ListItem Selected="true" Value="Classic">Classic</asp:ListItem>
<asp:ListItem Value="Lightweight">Lightweight</asp:ListItem>
</asp:DropDownList>
</li>
<li><span class="title">Title</span>
<asp:TextBox runat="server" ID="Title" Columns="50" Style="width: 150px;"></asp:TextBox></li>
<li><span class="title">Width (px)</span>
<telerik:RadNumericTextBox MinValue="0" AllowOutOfRangeAutoCorrect="true" NumberFormat-DecimalDigits="0"
runat="server" ID="Width" EnabledStyle-HorizontalAlign="Right" Width="150">
</telerik:RadNumericTextBox></li>
<li><span class="title">Height (px)</span>
<telerik:RadNumericTextBox MinValue="0" AllowOutOfRangeAutoCorrect="true" NumberFormat-DecimalDigits="0"
runat="server" ID="Height" EnabledStyle-HorizontalAlign="Right" Width="150">
</telerik:RadNumericTextBox></li>
<li><span class="title">OffsetX</span>
<telerik:RadNumericTextBox AllowOutOfRangeAutoCorrect="true" NumberFormat-DecimalDigits="0"
runat="server" ID="OffsetX" EnabledStyle-HorizontalAlign="Right" Width="150"
DataType="Int64">
</telerik:RadNumericTextBox></li>
<li><span class="title">OffsetY</span>
<telerik:RadNumericTextBox AllowOutOfRangeAutoCorrect="true" NumberFormat-DecimalDigits="0"
runat="server" ID="OffsetY" EnabledStyle-HorizontalAlign="Right" Width="150">
</telerik:RadNumericTextBox></li>
<li><span class="title">AutoCloseDelay</span>
<telerik:RadNumericTextBox MinValue="0" AllowOutOfRangeAutoCorrect="true" NumberFormat-DecimalDigits="0"
runat="server" ID="AutoCloseDelay" EnabledStyle-HorizontalAlign="Right" Width="150">
</telerik:RadNumericTextBox></li>
<li><span class="title">ShowDelay</span>
<telerik:RadNumericTextBox MinValue="0" AllowOutOfRangeAutoCorrect="true" NumberFormat-DecimalDigits="0"
runat="server" ID="ShowDelay" EnabledStyle-HorizontalAlign="Right" Width="150">
</telerik:RadNumericTextBox></li>
<li><span class="title">HideDelay</span>
<telerik:RadNumericTextBox MinValue="0" AllowOutOfRangeAutoCorrect="true" NumberFormat-DecimalDigits="0"
runat="server" ID="HideDelay" EnabledStyle-HorizontalAlign="Right" Width="150">
</telerik:RadNumericTextBox></li>
<li><span class="title">MouseTrailing</span>
<asp:CheckBox runat="server" ID="MouseTrailing"></asp:CheckBox></li>
<li><span class="title">ShowCallout</span>
<asp:CheckBox runat="server" Checked="true" ID="ShowCallout"></asp:CheckBox></li>
<li><span class="title">Modal</span>
<asp:CheckBox runat="server" Checked="false" ID="Modal"></asp:CheckBox></li>
</ul>
<div style="float: right;">
<asp:Button ID="Button1" runat="server" Text="Configure Tooltips" Width="180px" OnClick="ConfigureTooltip">
</asp:Button>
</div>
</qsf:ConfiguratorPanel>
</div>
</form>
</body>
</html>