In this article I will explain with an example, how to display ToolTip in ASP.Net MVC Razor.
The model data will be displayed in HTML Table and then the jQuery UI ToolTip Plugin will be applied to each Row of the HTML Table, thus when mouse is hovered on the Table Row, the jQuery UI ToolTip Plugin will display ToolTip.
Model
The Model class consists of following 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 following Action method.
Action method for handling GET operation
Inside this Action method, a generic List collection of Customer class object is created with some sample data.
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
Inside the View, the generic List collection of Customer Model is declared as the Model for the View.
The HTML Table
The View consists of an HTML Table. A FOR LOOP is executed over the Model and the Table rows are generated for the HTML Table.
The Description Field is set in the title attribute of the TR element. Thus the jQuery UI ToolTip plugin will read the value from the title attribute and will display as ToolTip.
jQuery ToolTip implementation
Inside the View, following jQuery UI Tooltip CSS file is inherited.
1. jquery-ui.css
Then following jQuery and jQuery UI Tooltip JS Script files are inherited.
1. jquery.min.js
2. jquery-ui.js
Inside the jQuery document ready event handler, the jQuery UI Tooltip plugin is applied to all the Rows of the HTML Table except the first Row i.e. the Header Row.
Thus, when mouse is moved over cell, the title will be displayed in ToolTip.
@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.13.2/themes/base/jquery-ui.css" />
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script type="text/javascript" src="https://code.jquery.com/ui/1.13.2/jquery-ui.js"></script>
<script type="text/javascript">
$(function () {
$("#Grid tr").not("tr:first-child").tooltip();
});
</script>
</body>
</html>
Screenshot
![Display ToolTip in ASP.Net MVC]()
Demo
Downloads
