Comment ajouter une info-bulle à un "td" avec jquery?

Question

J'ai besoin d'ajouter une info-bulle/alt à un élément "td" à l'intérieur de mes tables avec jquery.

Quelqu'un peut-il m'aider?

J'ai essayé:

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

où j'ai vérifié que je suis en utilisant le "td" comme "ce". ** Edit: ** Je suis capable de capturer l'élément "td" en utilisant la commande "alert" et cela a fonctionné. Donc, pour une raison quelconque, la fonction "Astuce" ne fonctionne pas. Quelqu'un sait pourquoi ce serait?

Answer 1

vous pourriez vouloir jeter un oeil à http://bassistance.de/jquery-plugins/jquery-plugin-tooltip/

Answer 2

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

une meilleure façon peut-être de mettre title attributs dans votre code HTML. De cette façon, si quelqu'un a désactivé javascript, il obtiendra toujours une info-bulle (bien que pas aussi jolie/flexible que jQuery).

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

puis utilisez ce 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

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

Answer 4

Si vous voulez vraiment mettre ces infobulles sur les cellules de votre table et pas vos en-têtes de table - où ils auraient beaucoup plus de sens - s'il vous plaît envisager de les mettre sur le contenu à l'intérieur des cellules de la table, où il est beaucoup plus significatif.

Answer 5

grdList - id table

td: nième enfant (5) - colonne

$('#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

$('#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 - id table

td: nième enfant (5) - colonne 5