Show a tooltip with more info when mousover a MVC3

Question

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

Answer 1

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!

Answer 2

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.