In this article I will explain with an example, how to implement jQuery ToolTip in ASP.Net Core Razor Page.
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; }
}
Index PageModel (Code-Behind)
The Page Model consists of following Handler method.
Handler method for handling GET operation
Inside this Handler method, a generic List collection of Customer class object is created with some sample data.
public class IndexModel : PageModel
{
public List<Customer> Customers { get; set; }
public void OnGet()
{
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." }
};
}
}
Razor Page (HTML)
The HTML Table
The Razor Page consists of an HTML Table. A FOR loop is executed over the public property 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 Razor Page, 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.
@page
@model ToolTip_Core_Razor.Pages.IndexModel
@using ToolTip_Core_Razor.Models;
@{
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.Customers)
{
<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
![Implement jQuery ToolTip in ASP.Net Core Razor Pages]()
Demo
Downloads
