J'ai utilisé quelques plug-ins infiltrices différentes au fil des ans, mais je pense que son devient devenu le moment d'écrire le mien. Simplement, je ne cherche pas un plugin qui a toutes les options, car je sais comment je veux que chaque info-bulle apparaisse pour regarder et se comporter. La plupart des plugins ont une gamme d'animations et de positions disponibles et je pense que c'est excessif pour le poids léger, je veux créer, avec votre aide bien sûr :)
Fondamentalement, à l'aide de l'attribut Titre de la survolte, je veux une info-bulle apparaître directement au-dessus et centré sur l'élément étant plané vers l'élément.
Je sais comment remplir la Div qui sera montré, mais ce que j'essaie de travailler, est de savoir comment dire que DIV se positionner directement au-dessus de l'élément.
Idéalement, cela se fait avec un code minimal. Ma logique dit quelque chose comme ceci (pseudo code): Bien sûr, le code ci-dessus va simplement Remplissez l'info-bulle et ne pas être positionné par rapport à l'élément planéible. C'est là que ma compréhension tombe courte. Pouvez-vous aider? EDIT: Juste pour clarification, je ne veux pas que l'info-bulle se déplace avec la souris.
5 Réponses :
Sans exemples de code spécifiques, vous pouvez consulter le contenu de l'objet événement (je suppose que vous le faites sur l'événement Onmouseover).
Vos propriétés clientX et clienty de cela devraient aider
Consultez les éléments suivants pour l'objet événement:
Regardez les différentes fonction CSS dans jQuery, principalement Ceci placerait la totalité statiquement, ou près de, le lien, lequel Je pense que c'est ce que vous cherchez. Si vous souhaitez que l'info-bulle puisse bouger avec la souris, vous devez mettre à jour de manière dynamique la position dans un MouseMove événement. offset () et peut-être hauteur () .
Je pense que c'est ça. Semble évident maintenant pour regarder les fonctions CSS là-bas!
Le sommet semble fonctionner bien, mais mon attribut «gauche» ne semble rien faire: $ ('# tooltipos »). CSS ({top: $ (this) .Offset (). Haut - 50 +' px ' , à gauche: $ (ceci) .Offset ()}); -- des idées?
Décalse () Renvoie un objet avec les attributs "TOP" et "GAUCHE", vous devez donc utiliser offset (). gauche . Avez-vous également attaché "PX"?
Ahh c'est ce que j'avais manqué. .left et px. tx tas de tromperie
Je pense que cela peut vous aider.
<body> <div id="myToolTip"></div> <div class="hoverAble" title="I am good at code">hi catch me</div> </body> </html>
Désolé, j'aurais dû être plus précis. Je ne veux pas avoir la pointe de passage avec la souris .. juste un peu au-dessus de l'élément actuel.
<div title="This is tooltip">Hover Me</div> This simple tooltip is working for me. U can add any class to make it stylish.
L'un des plus faciles à utiliser la totalité intégrée jquery.ui.
<div class="juppiduppi" title="Here is a tooltip, just for you. ">Over here with the mouse... </div>
Dans votre code, il y a un bogue prêt (fonction () {}); Le support est manquant!