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();
}

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