Introduction:
Here I will explain how to create simple tooltip using jQuery UI library Plugin with example in asp.net.
Description:
In previous articles I explained Change the style of tooltip in jQuery, jQuery Countdown timer script example, jQuery Increase or Decrease font size of website, Redirect to another page after some time delay, jQuery slideUp slideDown toggle effects and many articles relating to JQuery and asp.net. Now I will explain how to create simple tooltip jQuery UI library in asp.net.
In previous articles I explained Change the style of tooltip in jQuery, jQuery Countdown timer script example, jQuery Increase or Decrease font size of website, Redirect to another page after some time delay, jQuery slideUp slideDown toggle effects and many articles relating to JQuery and asp.net. Now I will explain how to create simple tooltip jQuery UI library in asp.net.
Recently new jQuery
plugin 1.9.0
has been released in that many bug fixes and some of new features have been
introduced in that tooltip is the one feature. If you want to create beautiful
tooltip using jQuery
plugin 1.9.0
you need to write the code like as shown below
|
Whenever we set this property it will
change the style of all the elements in that page. If you want to set tooltip
for particular textbox then use textbox id for that we need to write the
code like as shown below
<script type="text/javascript">
$(document).ready(function() {
$('#txtUserName'.tooltip();
});
</script>
|
If you want to see this with complete
example check below code
Example
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title>jQuery UI Tooltip - Forms</title>
<link rel="stylesheet"
href="http://code.jquery.com/ui/1.9.1/themes/base/jquery-ui.css"
/>
<script src="http://code.jquery.com/jquery-1.8.2.js"></script>
<script src="http://code.jquery.com/ui/1.9.1/jquery-ui.js"></script>
<style type="text/css">
.ui-tooltip
{
font-size:10pt;
font-family:Verdana;
}
</style>
<script type="text/javascript">
$(function()
{
$(document).tooltip();
});
</script>
</head>
<body>
<form id="form1"
runat="server">
<table>
<tr><td colspan="2" align="center"><b>User Information</b></td></tr>
<tr>
<td>FirstName:</td>
<td><input id="txtfName"
name="firstname"
title="Please
enter your firstname." /></td>
</tr>
<tr>
<td>Lastname:</td>
<td> <input id="txtlName" name="lastname" title="Please enter your lastname." /></td>
</tr>
<tr>
<td>Location:</td>
<td> <input id="txtLocation"
name="address"
title="Your home
or work address." /></td>
</tr>
</table>
</form>
</body>
</html>
|
Demo
 |
|
If you enjoyed this post, please support the blog below. It's FREE! Get the latest Asp.net, C#.net, VB.NET, jQuery, Plugins & Code Snippets for FREE by subscribing to our Facebook, Twitter, RSS feed, or by email. |
|||
Subscribe by RSS
Subscribe by Email
|
|||
|
|
|
3 comments :
nice ..... thank you 4 sharing....
Sir there is a website named www.gbtu.com in this website there is jquery box is used seems to be very special as it displays the announcements and notices of the organizations kindly guide me on that.....