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

将鼠标悬停在MVC3 Razor WebGrid行上时，显示包含更多信息的工具提示

3 个答案: