Introduction
This article explains how to move a ToolTip along with the Mouse Pointer.
You must have seen ToolTips in your applications, but what about a ToolTip that will move along with the Mouse Pointer, it will get stuck to the mouse pointer and follows the pointer until it leaves the field.
I used jQuery for getting this functionality.
Step 1
First of all you need to add two external jQuery files to your application that are as follows:
- jQuery-1.9.1.js
- jQuery-ui-1.10.3.js
You can either download these files from jQuery's website or download my application and fetch the jQuery files from it.
Step 2
After downloading these files you need to add the reference of these files in the head section of your application.
<head runat="server">
<title></title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<script src="jquery-1.9.1.js"></script>
<script src="jquery-ui-1.10.3.js"></script>
</head>
Step 3
Now I will add a Label and a Textbox on which the ToolTip is to be shown, add this code to the body section:
<body>
<table>
<tr>
<td>
Mobile Number:
</td>
<td>
<input id="Mobile" title="Provide Your 10 Digit Mobile Number">
</td>
</tr>
</table>
<p>Hover the field to see the tooltip.</p>
</body>
Here I took a Textbox whose id is set to "Mobile", you need to provide the title for the application on which a ToolTip is to be shown because a title message will be shown in the TollTip.
Step 4
Now we need to work on the jQuery code that will work to move the ToolTip along with the Mouse, write this code in the Head section:
<script>
$(function () {
$(document).tooltip({
track: true
});
});
</script>
Here I created a simple function. In this function the tooltip property is applied to the document and it's tracking is set to true.
Now our application is created and is ready for execution.
Output
On running the application you will get output like this:
![Movable ToolTip]()
Here you can see that a Textbox and a label is available, now when I hover over this Textbox a tooltip will start showing:
![Movable ToolTip]()
![Movable ToolTip]()
The complete code of this application is as follows:
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<script src="jquery-1.9.1.js"></script>
<script src="jquery-ui-1.10.3.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css">
<style>
label {
display: inline-block;
width: 5em;
}
</style>
<script>
$(function () {
$(document).tooltip({
track: true
});
});
</script>
</head>
<body>
<table>
<tr>
<td>
Mobile Number:
</td>
<td>
<input id="Mobile" title="Provide Your 10 Digit Mobile Number">
</td>
</tr>
</table>
<p>Hover the field to see the tooltip.</p>
</body>
</html>