In this article I will explain with an example, how to display ToolTip inside Grid in ASP.Net MVC Razor.
A Grid will be generated using an HTML Table by executing a FOR LOOP over Model class objects and adding Rows to the HTML Table.
The jQuery ToolTip Plugin will be applied to each Row of the HTML Table thus when mouse is hovered on the Table Row, the ToolTip will be displayed.
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
![Display ToolTip inside Grid in ASP.Net MVC]()
Downloads
