MVC3 Razor WebGrid行の詳細を表示するツールチップを表示

Question

私は人のリストを持つグリッドを持っています。特定の人の行にマウスオーバーすると、追加情報（写真、住所など）をツールチップに表示したいと思います。 モデルに必要なすべてのデータがありますが、グリッド内にツールチップ機能を追加する方法はわかりません。私はまた、jQuery UIのツールチップがこれに適しているのだろうか？

TIA :)

Answer 1

はBeautyTips jQueryプラグインを試してみてください。 ajaxコンテンツを読み込むのに適しています。それには多くの機能があり、HTML5もサポートしています。デモhereをチェックしてください。バージョン以下

grid.Column("LongTextColumn", "Column Header Here" 
      , format: (item) => Html.Raw("<abbr style='background-color:Beige;' 
       title='" + item.LongTextColumn + "'>" + item.OtherModelColumn + 
       "</abbr>"), canSort: false) 

長いコメント/テキスト列の25個の文字を表示し、ツール - としてフルテキストの残りの部分を示しています。ここ

Answer 2

はasp.net MVCのWebGridにツールチップを表示するためのコードサンプルがあります先端。また、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) 

これが役に立ちます。