jQuery: Afficher l'infobulle sans lien

Question

Est-il possible d'afficher une info-bulle sans créer de lien?

Par exemple, j'ai le code suivant sans lien:

<ul class="letters" title="This is the title"> 
<li>A</li> 
<li>B</li> 
<li>C</li> 
</ul> 

Alors, comment puis-je montrer l'info-bulle « Tel est le titre » quand je souris sur dessus? Btw, je ne veux utiliser aucun plugin d'info-bulle.

Answer 1

Vous rendre votre vie un peu plus difficile de dire que vous ne voulez pas pour profiter de tout travail que d'autres ont déjà fait. :-)

Certains des composants:

• Vous pouvez trouver tous les éléments ul qui ont un attribut title via $ ou jQuery:

  var targets = $("ul[title]"); 
  

• Vous pouvez les regarder pour l'événement mouseenter et, si aucun événement mouseleave ne se déclenche dans les X millisecondes, affichez votre info-bulle. (Ce sont des événements spécifiques à IE, mais jQuery les fournit sur tous les navigateurs, ce qui est très utile, et fournit également hover, ce qui est un moyen pratique de raccorder les gestionnaires mouseenter et mouseleave.) Bien que cela signifie que vous vous connectez lot de gestionnaires d'événements (depuis mouseenter et mouseleave ne bulle pas   — partie de ce qui les rend si pratique). Vous mai être mieux de suivre mouseover/mouseout au niveau du document et de gérer les complexités qui se posent, car ils faire bulle.

• Pour afficher votre info-bulle, vous pouvez obtenir l'emplacement de l'élément en question (via offset) et montrer un contenant div absolument placé à proximité du titre (que vous pouvez obtenir via attr). Lorsque l'utilisateur supprime la souris de l'info-bulle (mouseleave), supprimez-le.

Mais encore une fois, vous pourriez envisager d'utiliser le code d'un projet qui a déjà fait cela, trouvé toutes les rides, etc.Lisez d'abord le code pour vous assurer qu'il fait ce que vous voulez et non quelque chose que vous ne voulez pas, mais réinventer la roue est généralement (pas toujours!) Une perte de temps ... Même si vous ne finissez pas par utiliser le plug-in, lire à travers pour voir ce que les pièges sont pourraient être utiles.

Answer 2

Obtenir l'attribut title

title = $('.letters').attr('title'); 

et le travail à partir de là. Il n'y a pas de fonction magique "title_tooltip_popup()" dans Jquery, alors vous pourriez envisager de créer votre propre ou d'utiliser un plugin.

---

Rappelez-vous que si vous travaillez avec des classes ce sélecteur

$('.letters') 

pourrait faire référence à plus de 1 élément