CODEWITHSUNDEEP
asp.net-mvc-3onmouseovertooltipwebgrid
karan k
karan k

Reputation: 977

Display tooltip on mouseover event in MVC3 WebGrid

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?

Upvotes: 1

Views: 5435

Answers (1)

whoblitz
whoblitz

Reputation: 1065

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>),

Upvotes: 1

Related Questions