In this article I will explain with an example, how to display ToolTip in WebGrid in ASP.Net MVC.
The ToolTip will be displayed using jQuery UI ToolTip Plugin which will be applied to the Cell of the WebGrid in ASP.Net MVC Razor.
Note: For beginners in ASP.Net MVC, please refer my article ASP.Net MVC Hello World Tutorial with Sample Program example.
 
 
Model
The Model class consists of following proprieties.
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 class objects is set as the Model for the View.
Displaying Records
For displaying the records, a WebGrid is used. The WebGrid is initialized with the Model i.e. IEnumerable collection of Customer Model class objects as source.
Note: For more information on usage of WebGrid, please refer WebGrid Step By Step Tutorial with example in ASP.Net MVC.
 
The WebGrid is created using the GetHtml method with the following parameters.
HtmlAttributes – It is used to set the HTML attributes to the HTML Table generated by WebGrid such as ID, Name, Class, etc.
Columns – It is used to specify the columns to be displayed in jQuery and also allows us to set specific Header Text for the columns.
The Name column of the WebGrid consists of an HTML SPAN element and the Description Field is set in the title attribute of the SPAN element.
Thus, the jQuery UI ToolTip plugin will read the value from the title attribute and displayed as ToolTip.
 
jQuery UI 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 HTML SPAN elements inside the WebGrid with CSS Class Name.
Thus, when mouse is moved over cell, the title will be displayed in ToolTip.
@using ToolTip_WebGrid_MVC.Models;
@model List<CustomerModel>
 
@{
    Layout = null;
    WebGrid webGrid = new WebGrid(source: Model, canPage: true, canSort: false);
}
 
<!DOCTYPE html>
 
<html>
<head>
    <meta name="viewport" content="width=device-width"/>
    <title>Index</title>
</head>
<body>
    @webGrid.GetHtml(
        htmlAttributes: new { @id = "WebGrid"},
        columns: webGrid.Columns(
                 webGrid.Column("CustomerID", "Customer ID"),
                 webGrid.Column(header: "Name", format: @<span class="Name" title="@item.Description">@item.Name</span>, style: "Name"),
                 webGrid.Column("Country", "Country")))
    <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 () {
            $("#WebGrid .Name").tooltip();
        });
    </script>
</body>
</html>
 
 
Screenshot
Display ToolTip in WebGrid in ASP.Net MVC
 
 
Demo
View Demo
 
 
Downloads
Download Code