In this article I will explain with an example, how to implement jQuery ToolTip Plugin in ASP.Net MVC Razor.
The jQuery ToolTip Plugin will be applied to each Row of the HTML Table populated using Model data, thus when mouse is hovered on the Table Row, the jQuery ToolTip Plugin will display ToolTip.
 
 
Model
Following class is used as the Model class. It has the following four properties.
public class Customer
{
    public int CustomerId { get; set; }
    public string Name { get; set; }
    public string Country { get; set; }
    public string Description { get; set; }
}
 
 
Controller
The Controller consists of one Action method.
Action method for handling GET operation
Inside this Action method, a Generic List collection of Customer class objects is created and then objects are inserted into it.
Finally, the Generic List collection of Customer class objects is returned to the View.
public class HomeController : Controller
{
    // GET: Home
    public ActionResult Index()
    {
        List<Customer> customers = new List<Customer>()
        {
            new Customer{ CustomerId = 1, Name = "John Hammond", Country = "United States", Description = "Works as a scientist in USA." },
            new Customer{ CustomerId = 2, Name = "Mudassar Khan", Country = "India", Description = "ASP.Net programmer and consultant in India." },
            new Customer{ CustomerId = 3, Name = "Suzanne Mathews", Country = "France", Description = "Content Writer in France." },
            new Customer{ CustomerId = 4, Name = "Robert Schidner", Country = "Russia", Description = "Wild life photographer in Russia." }
        };
        return View(customers);
    }
}
 
 
View
The Generic List collection of Customer class objects is set as the Model for the View.
HTML Markup
The View consists of an HTML Table. A FOR LOOP is executed over the Generic List collection of Customer class objects and the Table rows are generated for the HTML Table.
Note: You will notice that the Description Field is set in the title attribute of the TR element. Thus the jQuery ToolTip plugin will read the value from the title attribute and will display as ToolTip.
 
jQuery ToolTip implementation
Inside the jQuery document ready event handler, the jQuery ToolTip plugin is applied to all the Rows of the HTML Table except the first Row i.e. the Header Row.
@using ToolTip_MVC.Models;
@model List<Customer>
 
@{
    Layout = null;
}
 
<!DOCTYPE html>
 
<html>
<head>
    <meta name="viewport" content="width=device-width"/>
    <title>Index</title>
</head>
<body>
    <table id="Grid" cellpadding="0" cellspacing="0">
        <tr>
            <th>Customer ID</th>
            <th>Name</th>
            <th>Country</th>
        </tr>
        @foreach (Customer customer in Model)
        {
            <tr title="@customer.Description">
                <td>@customer.CustomerId</td>
                <td>@customer.Name</td>
                <td>@customer.Country</td>
            </tr>
        }
    </table>
    <link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
    <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
    <script type="text/javascript">
        $(function () {
            $("#Grid tr").not("tr:first-child").tooltip();
        });
    </script>
</body>
</html>
 
 
Screenshot
Implement jQuery ToolTip in ASP.Net MVC
 
 
Downloads
Download Code