当鼠标悬停在 MVC 3 Razor WebGrid 行上时显示带有更多信息的工具提示答案

【问题标题】：Show a tooltip with more info when mousover a MVC3 Razor WebGrid row当鼠标悬停在 MVC 3 Razor WebGrid 行上时显示带有更多信息的工具提示
【发布时间】：2012-01-25 09:59:11
【问题描述】：

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

TIA :)

【问题讨论】：

是的，我会使用 jquery 工具提示。

标签： jquery asp.net-mvc-3 razor webgrid

【解决方案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)

希望这会有所帮助！

【讨论】：

【解决方案2】：

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

【讨论】：

看起来很有希望 thnx :) 我仍然想知道如何在 webgrid 中获取工具提示，所以我保持我的问题开放。

【解决方案3】：

源自 Mayank 的回答，这里有一个对我有用的更简洁的版本：

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

【讨论】：