显示工具提示使用的详细信息时mousover一个MVC3剃刀排的WebGrid [英] Show a tooltip with more info when mousover a MVC3 Razor WebGrid row

问题描述

我有人员名单的网格。鼠标悬停在一定行的人，我想，以显示工具提示附加信息（照片，地址等）。
在模型中的所有需要​​的数据存在，但我不知道如何添加网格内的提示功能。我也想知道jQuery UI的工具提示是一个不错的选择呢？

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：）

推荐答案

下面是code样品显示工具提示在asp.net MVC的WebGrid：

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)

下面的版本显示长注释/文本列的25个字符，并显示了完整的文本作为工具提示的休息。它还照顾文本超过25个字符的短

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)

希望这有助于！

这篇关于显示工具提示使用的详细信息时mousover一个MVC3剃刀排的WebGrid的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！