In this article I will show you how you can display tooltip
on a textbox on mouse over using jquery in asp.net. In this article I have used
asp.net,jquery, jqueryui for displaying tooltip.
Some of my previous articles are as follows:Show
and Hide Div on Button Click Using jQuery in Asp.Net | How to Use jQuery Toggle
Function on Click In Asp.net, Restrict
Number of Characters to be Entered in the TextArea Using jQuery in Asp.Net MVC,
Display
No of Characters Entered In TextArea Using jQuery, Drag
Drop Cells in GridView Control Using Asp.net C# and jQuery.
So for this article first we will create and asp.net
application and add the below code in you aspx page.
<%@ Page Title="Home Page" Language="C#" AutoEventWireup="true"
CodeBehind="Default.aspx.cs"
Inherits="Asp.Net_ToolTip._Default"
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xml:lang="en">
<head id="Head1"
runat="server">
<title>jQueryUI Tooltip Using jQuery on Textbox in Asp.Net</title>
<link href="~/Styles/Site.css" rel="stylesheet"
type="text/css"
/>
<link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<script>
$(function
() {
$(document).tooltip({
position: {
my: "left",
at: "right",
using: function (position, feedback) {
$(this).css(position);
$("<div>")
.addClass("arrow")
.addClass(feedback.vertical)
.addClass(feedback.horizontal)
.appendTo(this);
}
}
});
});
</script>
</head>
<body>
<form id="Form1" runat="server">
<div class="page">
<div class="header">
<div class="title">
<h1>
ASP.NET ToolTip
</h1>
</div>
<div class="clear hideSkiplink">
</div>
</div>
<div class="main">
Enter Name :
<p><asp:TextBox ID="TextBox1" runat="server" Width="200px" title="Please enter you name."> </asp:TextBox></p>
</div>
<div class="clear">
</div>
</div>
<div class="footer">
</div>
</form>
</body>
</html>
|
In above code jquery script is used for displaying the
tooltip on textbox. In this the text which you will provide as a title will display
as tooltip text.
<script>
$(function
() {
$(document).tooltip({
position: {
my: "left",
at: "right",
using: function (position, feedback) {
$(this).css(position);
$("<div>")
.addClass("arrow")
.addClass(feedback.vertical)
.addClass(feedback.horizontal)
.appendTo(this);
}
}
});
});
</script>
|
Now run the page to check the output.
DOWNLOAD
About the Author
0 comments:
Please let me know your view