This article will show you how you can create tooltip effect
using jQuery
in asp.net with explode effect. In this I have shown tooltip in asp.net textbox
control.
Some of my previous articles are as follows: Add
Remove Or Change Css Class Using jQuery In Asp.Net, Disable
And Enable Button Using jQuery In Asp.Net, Cookies
Create, Read and Delete Operation Using jQuery in Asp.Net, Css
Class Change of Button On Radiobutton Selection In Asp.Net Using jQuery, Shaking
Login Box Open Button Click Using jQuery In Asp.Net, Slider
Colorpicker Horizontal Direction Using jQuery in Asp.Net, jQuery
Error Message Display Using Popup Dialog Box In Asp.Net.
So for this article first we will create a new asp.net application and add a below jquery reference in header of the page.
So for this article first we will create a new asp.net application and add a below jquery reference in header of the page.
<link rel="stylesheet" href="http://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
|
Now we will add the below jquery code into the page.
<script>
$(function
() {
$("#<%=txtName.ClientID %>").tooltip({
hide: {
effect: "explode",
delay: 250
}
});
});
</script>
|
In this I have used id of the control to display the tooltip
on the control. Now combine the code.
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="WebApplication1.WebForm1"
%>
<!DOCTYPE html
PUBLIC "-//W3C//DTD
XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>jQuery
Tooltip With Animation Explode Effect In Asp.Net</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<style type="text/css">
body
{
font-size:
11px;
}
</style>
<script>
$(function
() {
$("#<%=txtName.ClientID %>").tooltip({
hide: {
effect: "explode",
delay: 250
}
});
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
Name : <asp:TextBox ID="txtName" runat="server" title="Tooltip with explode effect"></asp:TextBox>
</div>
</form>
</body>
</html>
|
In this whatever we will put on the title of the control will appear in the tooltip as message. Now we have done run the application to check the output.
About the Author
0 comments:
Please let me know your view