In this article I will explain with an example, how to display ToolTip in WebGrid in ASP.Net MVC Razor.
The ToolTip will be displayed using jQuery ToolTip Plugin which will be applied to the Cell of the WebGrid in ASP.Net MVC Razor.
 
 
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.
Display
The WebGrid is initialized with the Model i.e. IEnumerable collection of Customer 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 WebGrid and also allows 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 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 HTML SPAN elements inside the WebGrid with CSS Class set as Name.
@using ToolTip_WebGrid_MVC.Models;
@model List<Customer>
 
@{
    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.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 () {
            $("#WebGrid .Name").tooltip();
        });
    </script>
</body>
</html>
 
 
Screenshot
Display ToolTip in WebGrid in ASP.Net MVC
 
 
Downloads