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 usingjQuery 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
 |
No comments:
Post a Comment