Ajax Tooltip Example asp.net - Asp.net
How to create a simple tooltip in asp.net?
Snippet Code
Rate this page :
|
[ 0 votes]
|
Tooltip is used to display a popup message when you hover the mouse over an element like textbox or button. Here,the sample code to create a tooltip in asp.net.
DefaultVB.aspx:
----------------------
<%@ Page Language="vb" %>
<!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">
<title>Tooltip ASP.NET Example</title>
<link href="styles.css" rel="stylesheet" />
</head>
<body>
<form id="form1" runat="server">
<telerik:RadScriptManager runat="server" ID="RadScriptManager1" />
<telerik:RadSkinManager ID="RadSkinManager1" runat="server" ShowChooser="true" />
<script src="scripts.js" type="text/javascript"></script>
<telerik:RadFormDecorator ID="localRfd" runat="server" DecoratedControls="All" DecorationZoneID="localZone" Skin="Default" />
<div id="localZone">
<asp:Label Visible="false" ID="Label1" runat="server"></asp:Label>
<telerik:RadToolTip runat="server" ID="RadToolTip1" Width="200px" ShowEvent="onmouseover"
RelativeTo="Element" Animation="Resize" TargetControlID="link1" IsClientID="true"
HideEvent="LeaveTargetAndToolTip" Position="TopRight" Text="Use the Tab key to move from one TextBox to the other and see how the RadToolTip opens on focus of the target control.">
</telerik:RadToolTip>
<telerik:RadToolTip ID="RadToolTip2" runat="server" Width="100px" ShowEvent="OnClick"
TargetControlID="link2" IsClientID="true" HideEvent="LeaveToolTip" Position="Center"
Animation="Resize" ShowDelay="0" RelativeTo="Element" Text="Right-click on the picture above to show the RadToolTip.">
</telerik:RadToolTip>
<telerik:RadToolTip ID="RadToolTip3" runat="server" TargetControlID="imgRightClick"
IsClientID="true" RelativeTo="Element" ShowEvent="OnRightClick" HideEvent="LeaveTargetAndToolTip"
Animation="Fade" ShowDelay="10" Width="100" Height="100" Position="TopRight"
Text="Copy right protected.">
</telerik:RadToolTip>
<telerik:RadToolTipManager runat="server" ID="RadToolTip5" ShowEvent="OnFocus" OnClientShow="OnClientShow"
Skin="Default" ShowDelay="200" AutoCloseDelay="5000" Width="300px" Position="MiddleRight"
RelativeTo="Element">
<TargetControls>
<telerik:ToolTipTargetControl TargetControlID="txtFirstName"></telerik:ToolTipTargetControl>
<telerik:ToolTipTargetControl TargetControlID="txtEmail"></telerik:ToolTipTargetControl>
</TargetControls>
</telerik:RadToolTipManager>
<div class="demo-container no-bg size-wide">
<div class="registrationFormWrapper">
<a id="link1" href="#">
<img src="images/help.gif" class="helpLink" alt="" /></a>
<table class="formTable">
<tr>
<td>
<asp:Label ID="lblFirstName" runat="server" Text="Name: "></asp:Label>
</td>
<td>
<asp:TextBox ID="txtFirstName" onfocus="Hilite(this)" onblur="Hilite(this, false)"
TabIndex="1" runat="server" ToolTip="Please, fill in first name, familiy name and any other initials or titles."></asp:TextBox>
</td>
</tr>
<tr>
<td>
<asp:Label ID="lblEmail" runat="server" Text="E-mail: "></asp:Label>
</td>
<td>
<asp:TextBox ID="txtEmail" TabIndex="3" runat="server" onfocus="Hilite(this)" onblur="Hilite(this, false)"
ToolTip="It is possible to list more than one email, separated by comma."></asp:TextBox>
</td>
</tr>
<tr>
<td></td>
<td>
<asp:Button ID="btnSubmit" Text="Submit" runat="server"></asp:Button>
</td>
</tr>
</table>
</div>
</div>
</div>
</form>
</body>
</html>
script.js:
----------
(function(global, undefined) {
lastActiveToolTip = null;
global.OnClientShow = function(sender, args) {
lastActiveToolTip = sender;
};
global.Hilite = function(me, focus) {
me.style.backgroundColor = false != focus ? "#ffffcc" : "white";
};
function beforeunload() {
var activeTooltip = Telerik.Web.UI.RadToolTip.getCurrent();
if (!activeTooltip) activeTooltip = lastActiveToolTip;
if (activeTooltip) {
var targetElement = activeTooltip.get_targetControl();
activeTooltip._registerMouseHandlers(targetElement, false);
}
};
if (Sys.Browser.agent == Sys.Browser.InternetExplorer) {
global.attachEvent('onbeforeunload', beforeunload);
}
})(window);
