当删除MVC3 Razor WebGrid行时显示带有更多信息的工具提示

Question

我有一个包含人员列表的网格。将鼠标悬停在某些人的行上，我想在工具提示中显示其他信息（照片，地址等）。所有所需的数据都存在于模型中，但是我不知道如何在网格内添加工具提示功能。我也想知道jquery ui工具提示是否是一个不错的选择？

TIA：）

Answer 1

这是在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个字符的文本。

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)

希望这会有所帮助！

Answer 2

尝试使用BeautyTips jQuery插件。加载ajax内容是一个很好的选择。它具有很多功能，甚至还支持HTML5。查看他们的演示here。

Answer 3

源自Mayank的回答，这是一个对我有用的较干净的版本：

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