Aspdotnet-Suresh

aspdotnet-suresh offers C#.net articles and tutorials,csharp dot net,asp.net articles and tutorials,VB.NET Articles,Gridview articles,code examples of asp.net 2.0 /3.5,AJAX,SQL Server Articles,examples of .net technologies

Create Simple Tooltip with jQuery UI Plugin Example/Tutorial

Nov 7, 2012
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 using jQuery 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

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 RSS subscribe by email Subscribe by Email

5 comments :

Rikin Patel said...

nice ..... thank you 4 sharing....

Abhinavsingh993 said...

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.....

Anonymous said...
This comment has been removed by a blog administrator.
Ajay Biswas said...

how to get "DD/MM/YYYY" format

Unknown said...

Nice one.Thanks for share with us :)

Give your Valuable Comments

Note: Only a member of this blog may post a comment.

© 2015 Aspdotnet-Suresh.com. All Rights Reserved.
The content is copyrighted to Suresh Dasari and may not be reproduced on other websites without permission from the owner.