Display tooltip on mouseover event in MVC3 WebGrid - asp.net-mvc-3

Question

I have a MVC3 WebGrid in my View.I want to display a tooltip when the mouse hovers over any row, displaying information coming from the server. I have already seen this link:
Show a tooltip with more info when mousover a MVC3 Razor WebGrid row
My point is,how will I get the ID of the row on mouseover event,because the information coming from the server will be based on row ID or maybe count. Also, in this link:
http://www.lullabot.com/files/bt/bt-latest/DEMO/index.html
you need a certain Selector to show the tooltip.So how can I assign a class to each row of WebGrid so I can display the tooltip?

Answer 1

Here is how I did it. Because of the limited nature of the default WebGrid, you are left with a few options... I needed this to work with IE6 and could NOT find a suitable jQuery plugin that would work in all browser, so I opted for option 1. Warning: It's a bit dirty
1 - Roll your own HtmlHelper
2 - Use a third-party alternative to WebGrid
3 - Use a jQuery plugin
HtmlHelpers.cs
/// <summary>
/// This class contains various methods for supplementing the usage of html within the Razor view pages
/// </summary>
public static class HtmlHelpers
{
/// <summary>
/// This method truncates a string to a given length for display within a WebGrid or elsewhere as a tooltip
/// </summary>
/// <param name="helper">Generic parameter needed to recognize HtmlHelper syntax</param>
/// <param name="input">This is the string to truncate</param>
/// <param name="length">The length of the string to truncate to</param>
/// <returns>Html representing a tooltip, if needed</returns>
public static IHtmlString ToolTip(this HtmlHelper helper, String input, int length)
{
if (input.Length <= length)
return new MvcHtmlString(input);
else
return new MvcHtmlString(String.Format("<span title=\"{2}\">{0}{1}</span>", input.Substring(0, length), "...", input));
}
}
YourView.cshtml
grid.Column(columnName: "Detail", header: "Description", format: #<text>#Html.Truncate((string)item.Detail,50)</text>),