CODEWITHSUNDEEP
jqueryasp.net-mvc-3razorwebgrid
Fred
Fred

Reputation: 43

Show a tooltip with more info when mousover a MVC3 Razor WebGrid row

I have a grid with a list of persons. On mouseover a certain persons row I would like to show additional info (photo, address etc) in a tooltip. All the needed data exist in the model, but I don't know how to add the tooltip functionality inside the grid. I also wonder if the jquery ui tooltip is a good choice for this?

TIA :)

Upvotes: 1

Views: 5064

Answers (3)

SpaghettiCoder
SpaghettiCoder

Reputation: 31

Derived from the answer of Mayank, here's a somewhat cleaner version that worked for me:

grid.Column("Column Header", format: (item) => Html.Raw("<div title='" + item.ModelAttribute1 + "'>" + item.ModelAttribute2 + "</div>"))

Upvotes: 0

kvc
kvc

Reputation: 1137

Try the BeautyTips jquery plugin. It's a good one to load ajax content. It has a lot of features, and it even supports HTML5. Check out their demos here.

Upvotes: 1

Mayank
Mayank

Reputation: 342

Here is the code sample to show tool-tip in asp.net mvc webgrid :

grid.Column("LongTextColumn", "Column Header Here"
            , format: (item) => Html.Raw("<abbr style='background-color:Beige;'
              title='" + item.LongTextColumn + "'>" + item.OtherModelColumn + 
              "</abbr>"), canSort: false)

Below version shows 25 characters of long comment / text column and shows rest of the full text as a tool-tip. It also take care of text shorter than 25 characters.

grid.Column("ModelItem.LongTextColumn", "Column Header", format: (item) => 
             Html.Raw("<abbr style='background-color:Beige;' title='" +
             item.ModelItem.LongTextColumn + "'>" +
             item.ModelItem.LongTextColumn.PadRight(25).Substring(0, 25) + 
             "</abbr>"), canSort: false)

Hope this helps!

Upvotes: 4

Related Questions