jQuery Tooltip in ASP.Net MVC

Every control has a tooltip property but sometimes we need some special CSS or some kind of functionality for whenever we hover the mouse the tooltip tracks. For this kind of feature we have a jQuery tootip. The jQuery tooltip is part of the jQuery UI. In this article I will show you how to implement a jQuery tooltip in your ASP.Net application.

So let’s start the implementation of the tooltip in our website.

• Open Visual Studio
• "File" -> "New" -> "Project..."
• Choose "Visual C#" -> "Web" then select "ASP.NET MVC4 Web Application"
• Add a new Internet Application then click "OK"

Step 1: Create a new ActionResult Method in the Controller

HomeController.cs

public ActionResult ToolTipDemo()
{
return View();
}

Step 2: Right-click in this method area and click on "Add View" then click "Add".

TooTipDemo.cshtml

<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css">
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<style type="text/css">
.ui-tooltip {
font-size: small;
font-family: Arial;
}
</style>

@{

ViewBag.Title = "ToolTipDemo";
}
<h2>ToolTipDemo</h2>

<style>
label {
display: inline-block;
width: 5em;
}
</style>
<script>
$(document).ready(function () {
$(document).tooltip({
track: true
});
});
</script>
<table>
<tr>
<td>
Name
</td>
<td>
<input type="text" id="txtName" title="Your Full Name Please."
</td>
</tr>
<tr>
<td>
Phone
</td>
<td>
<input type="text" id="txtPhone" title="Your phone no. (+CountryCode)-(Std Code)-(Phone no.)."
</td>
</tr>
<tr>
<td>
Age
</td>
<td>
<input type="text" id="txtAge" title="Fill your age."
</td>
</tr>
<tr>
<td>
Date of Birth
</td>
<td>
<input type="text" id="txtDob" title="Fill DOB in MM/dd/yyyy Format"
</td>
</tr>
</table>

That’s it, Press F5 , run your code.



Understanding the code

As I said before the jQuery tooltip is part of the jQuery UI, so we add here these file links.

<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css">

<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>

For the jQuery UI, we need these files.

Now look at the following code.

<script>
$(document).ready(function () {
$(document).tooltip({
track: true
});
});
</script>

We use here:

$(document).tooltip({

When we write like this, the jQuery tooltip will start automatically in all of the controls where we use the title property(<input type=”text” id=”txtName” title=”Fill your Name”) . Here I use another property under the tooltip section, it is track: true. I hope you say, what is this. When you run this programme and hover your mouse in the area of your textboxes your tooltip tracks with your mouse pointer.

track: true is for that kind of stuff, if you don’t want to use this kind of functionality then you can remove the following lines:

$(document).tooltip({
});

Sometimes we do not need this kind of features for all controls, for example you just want this kind of feature only in your txtDob TextBox control. So just write:

<script>
$(document).ready(function () {
$(‘#txtDob’).tooltip({
track: true
});
});
</script>

Now when you run the program, you can only see the jQuery ToolTip in your txtDob TextBox.