テーブルやリストにツールチップを使用する

ここに、複数の行を持つテーブルがあります。テーブルの右側の削除アイコンの上にマウスを移動すると、 複数のトリガに同じツールチップの例を見ることができます。

Remove this row.

オリンピック・メダリスト: 20 Km 競歩

競技	金	銀	銅
1956 Melbourne	Leonid Spirin (URS)	Antanas Mikenas (URS)	Bruno Junk (URS)
1960 Rome	Volodymyr Holubnychy (URS)	Noel Freeman (AUS)	Stanley Vickers (GBR)
1964 Tokyo	Kenneth Matthews (GBR)	Dieter Lindner (EUA)	Volodymyr Holubnychy (URS)
1968 Mexico City	Volodymyr Holubnychy (URS)	José Pedraza (MEX)	Nikolay Smaga (URS)
1972 Munich	Peter Frenkel (GDR)	Volodymyr Holubnychy (URS)	Hans-Georg Reimann (GDR)
1976 Montreal	Daniel Bautista (MEX)	Hans-Georg Reimann (GDR)	Peter Frenkel (GDR)
1980 Moscow	Maurizio Damilano (ITA)	Pyotr Pochenchuk (URS)	Roland Wieser (GDR)
1984 Los Angeles	Ernesto Canto (MEX)	Raúl González (MEX)	Maurizio Damilano (ITA)
1988 Seoul	Jozef Pribilinec (TCH)	Ronald Weigel (GDR)	Maurizio Damilano (ITA)
1992 Barcelona	Daniel Plaza (ESP)	Guillaume LeBlanc (CAN)	Giovanni De Benedictis (ITA)
1996 Atlanta	Jefferson Pérez (ECU)	Ilya Markov (RUS)	Bernardo Segura (MEX)
2000 Sydney	Robert Korzeniowski (POL)	Noe Hernández (MEX)	Vladimir Andreyev (RUS)
2004 Athens	Ivano Brugnetti (ITA)	Francisco Javier Fernández (ESP)	Nathan Deakes (AUS)
2008 Beijing	Valeriy Borchin (RUS)	Jefferson Perez (ECU)	Jared Tallent (AUS)

スタンドアロン デモ

HTML コード

1つのツールチップ要素と複数のトリガがあります。各行には、 ツールチップ要素のトリガとして動作するよう設定されたされて delete.png 画像があります。ツールチップの内部の同じコンテンツをすべてのトリガーに使用できるように、 トリガに title 属性を持っていないことに注意してください。

<!-- same tooltip for each entry -->
<div id="tooltip" class="tooltip">
  Remove this row.
</div>
 
<table>
  <tr>
    <th scope="row" abbr="Model" class="spec">1956 Melbourne</th>
    <td>Leonid Spirin (URS)</td>
    <td>Antanas Mikenas (URS)</td>
    <td>Bruno Junk (URS)</td>
    <td><img src="table/delete.png" /></td>
  </tr>
 
  <!-- other rows -->
</table>

テーブルのためのわずかなスタイルがあり、スタイル・シートは ここで 見ることができますが、それはツールチップとは特に関係ありません。

JavaScript コード

各ツールチップは、このJavaScriptで設定されます。 トリガーのすべてで使用されているツールチップの要素を選択する tip コンフィギュレーションオプションを指定しています。

// 1つの DIV へツールチップを設定
$("#mytable img").tooltip({
    // 各ゴミ箱はトリガとして働く
    tip: '#tooltip',
    // カスタム配置
    position: 'center right',
    // ツールチップやや右へ移動
    offset: [0, 15],
    // マウスがトリガから移動して離れたときの遅延なし
    delay: 0
});

テーブルの行を削除

好奇心から、jQueryを使ってきれいにテーブルの行を削除する方法の示しています。 また、行を削除したときにツールチップを閉じる、tooltip API コールのサンプルを見ることができます:

$("#mytable img").click(function() {
  // 現在の画像（ゴミ箱）へのハンドルを取得
  var img = $(this);
  // 徐々に親の行を非表示にする
  img.parents("tr").fadeOut(function()  {
      // 行が削除された後、ツールチップAPIを使用してツールチップを隠す
      img.data("tooltip").hide();
  });
});