Using tooltips in tables or lists
Here is a table with multiple rows. Move your mouse over the delete icons on the right hand side of the table and you'll see an example of the same tooltip for multiple triggers.
| Games | Gold | Silver | Bronze | |
|---|---|---|---|---|
| 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 coding
We have only one tooltip element and multiple triggers. Each row has a delete.png image which is configured to work as a trigger for our tooltip element. Note that we don't have any title attribute on the triggers so we can use the same content inside the tooltip for every trigger.
<!-- 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>
There is quite a bit of styling for the table and the stylesheet can be seen here but it has nothing specifically to do with tooltips.
JavaScript code
Each tooltip is configured with this one JavaScript snippet. We have specified a tip configuration option that will select the tooltip element that is being used by all of the triggers.
// setup tooltip for a single DIV element
$("#mytable img").tooltip({
// each trashcan image works as a trigger
tip: '#tooltip',
// custom positioning
position: 'center right',
// move tooltip a little bit to the right
offset: [0, 15],
// there is no delay when the mouse is moved away from the trigger
delay: 0
});
Removing a table row
For the curious, we also have a demonstration of how to remove a table row neatly with jQuery. You can also see a sample of the tooltip API call which will close the tooltip when the row is removed:
$("#mytable img").click(function() {
// get handle to the current image (trashcan)
var img = $(this);
// gradually hide the parent row
img.parents("tr").fadeOut(function() {
// after the row is deleted, hide our tooltip using the tooltip API
img.data("tooltip").hide();
});
});
