OnMouse event Tooltip for @Html.Grid

Question

I use MVC3 Grid to show Events.

What I need is somehow integrate on mouse event for the "NAME" to show "Description" of the item.

How do I can implement? Thanks for any clue!!!

@{        
    var grid = new WebGrid(source: Model.Events,
    defaultSort: "Name",
    rowsPerPage: 20);
}

@if (Model != null)
{
   @grid.GetHtml(
   tableStyle: "grid",
   headerStyle: "head",
   alternatingRowStyle: "alt",
   rowStyle: "row",
   selectedRowStyle: "selected-row",
   columns: grid.Columns(
   grid.Column("Name", "Event", style: "column"),                                            
   grid.Column(format: (item) => Html.ActionLink("Edit", "Edit", new { id = item.ID }), style: "column-action")
   ) )
}

Answer 1

You can try using the "format" property to insert some raw HTML. Instead of this:

grid.Column("Name", "Event", style: "column")

try this:

grid.Column(columnName: "Name", header: "Event", format: (i) => @Html.Raw("<span title='" + i.Name + "'>" + i.Description + "</span>") )