V24s

"Get Updates : Subscribe to our e-mail newsletter to receive updates........" "Good Luck frnds" Admission 2018 Application Form 2018 Colleges Entrance Exam 2018 Results 2018 Notification 2018 University Educational Jobs 2018 Government Jobs 2018

Search This Blog v24s guys

Follow by Email

15 April, 2013

Create Simple Tooltip using jQuery UI Plugin Tutorial/Example

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.

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

<script type="text/javascript">
$(function() {
$( document ).tooltip();
});
</script>

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


Post a Comment

Popular Posts

Recent Posts

Google Analytics