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

jQuery Move Tooltip with Mouse Move or Cursor Example/ Tutorial

Nov 8, 2012
Introduction

Here I will explain how to create tooltip which will move according to mouse move using
jQuery UI library in asp.net.

Description:
  
In previous article I explained Create Simple Tooltip using jQuery UI Library in that whenever we hover on textbox controls we will get tooltip in fixed position it doesn’t move. Now I will explain how to implement tooltip which will move or positioned relative to mouse
and follow the mouse while it moves above the element using 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 with mouse move using jQuery plugin 1.9.0 you need to write the code like as shown below

<script ype="text/javascript">
$(function() {
$(document).tooltip({
track: true
});
});
</script>
Whenever we set property track: true then it will follow mouse by default it’s property false it will change the style of all the elements in that page. If you want to set this tooltip for particular textbox then use textbox id for that we need to write the code like as shown below

<script type="text/javascript">
$(function() {
$('#txtfName').tooltip({
track: true
});
});
</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:Calibri;

}
body
{
font-size:12pt;
padding:10px;
font-family:Calibri;
}
</style>
<script type="text/javascript">
$(function() {
$('#txtfName').tooltip({
track: true
});
});
</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="Please Enter Your Location." /></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

1 comments :

Tapan said...

nice sir.........

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.