How to add tooltip to "td" with jquery?

Question

I need to add a hint to the "td" element inside my tables using jquery.

Can someone help me?

I tried:

var tTip ="Hello world"; $(this).attr("onmouseover", tip(tTip)); 

where I checked that I use "td" as "this".

** Edit: ** I can capture the "td" element with the "alert" command, and it worked. Therefore, for some reason, the tip function does not work. Does anyone know why this would be?

Answer 1

you can look at http://bassistance.de/jquery-plugins/jquery-plugin-tooltip/

Answer 2

 $(this).mouseover(function() { tip(tTip); }); 

the best way could be to place title attributes in your HTML. Thus, if someone has javascript disabled, they will still get a hint (although not as pretty / flexible as you can do with jQuery).

 <table id="myTable"> <tbody> <tr> <td title="Tip 1">Cell 1</td> <td title="Tip 2">Cell 2</td> </tr> </tbody> </table> 

and then use this code:

 $('#myTable td[title]') .hover(function() { showTooltip($(this)); }, function() { hideTooltip(); }) ; function showTooltip($el) { // insert code here to position your tooltip element (which i'll call $tip) $tip.html($el.attr('title')); } function hideTooltip() { $tip.hide(); } 

Answer 3

 $('#grdList tr td:nth-child(5)').each(function(i) { if (i > 0) { //skip header var sContent = $(this).text(); $(this).attr("title", $(this).html()); if (sContent.length > 20) { $(this).text(sContent.substring(0,20) + '...'); } } }); 

grdList - table identifier

td: nth-child (5) - column 5

Answer 4

 var tTip ="Hello world"; $(this).mouseover( function() { tip(tTip); }); 

Answer 5

grdList - table identifier

td: nth-child (5) - column

 $('#grdList tr td:nth-child(5)').each(function(i) { if (i > 0) { //skip header var sContent = $(this).text(); $(this).attr("title", $(this).html()); if (sContent.length > 20) { $(this).text(sContent.substring(0,20) + '...'); } } }); 

Answer 6

If you really want to put these tooltips in your table cells, and not in the table headers - where they will make much more sense, please consider placing them in the INSIDE content for table cells, where it is much more meaningful.