La définition de la propriété de décalage plusieurs fois provoque le saut d'un élément vers un nouvel emplacement dans jQuery

Question

J'essaie de créer un effet similaire à une info-bulle avec jQuery.

Je réutilise le même élément <div> (id="tooltip") pour afficher l'info-bulle. Par conséquent, je dois constamment déplacer cet élément <div> chaque fois que l'utilisateur déplace le curseur sur un élément qui devrait afficher une info-bulle. Lorsque j'utilise la propriété offset(), cela fonctionne correctement la première fois, mais si je déplace la souris plusieurs fois d'une icône à l'autre, l'info-bulle commence à sauter vers différents emplacements.

Vous pouvez l'essayer ici:

http://jsfiddle.net/ZbwjQ/2/

Essayez de déplacer la souris d'une icône à l'autre à plusieurs reprises, vous remarquerez que l'info-bulle saute autour de manière incorrecte. Il devrait toujours apparaître immédiatement à la droite de l'icône qui survole.

Answer 1

Il y a plusieurs problèmes dans votre code.

Divs ne sont pas des étiquettes auto-fermeture:

<div />  <!-- Wrong --> 
<div></div> <!-- Good --> 

Lorsque vous avez divs vides, ajoutez la déclaration suivante dans votre CSS pour vous assurer qu'ils ont un corps:

div { 
    content: ""; 
} 

Le jQuery offset() la fonction semble boguée dans votre cas, à cause de votre caché. Préférez le code suivant pour changer son décalage:

$('#tooltip').css({ 
    top: o.top, 
    left: o.left 
}); 

De plus, la création d » o semble bien inutile. Il vous suffit de modifier directement la offset variable:

var offset = $(this).offset(); 
offset.left += $(this).width(); 
$('#tooltip').css({ 
    top: offset.top, 
    left: offset.left 
}); 

Enfin, essayez de ne pas accéder à plusieurs fois au même élément avec un sélecteur. jQuery devra trouver votre élément dans tout l'arbre DOM chaque fois que vous l'appelez.

var tooltip = $("#tooltip"); // Use it in mousenter/mouseleave => Avoids 2 useless selections 

// In your mousenter function 
var el = $(this); // Use "el" to get offset/width => 1 useless selection avoided 

Vous pouvez trouver un travail jsfiddle here.

Answer 2

Je suis depuis quelques jours sur JQuery et javascript, et mon infobulle maison sautait à l'occasion vers des zones impaires de l'écran. Suivi des variables de position dans la position de débogage dans Joomla, je ne pouvais pas voir de problème là-bas, l'info-bulle a été dit d'aller au bon endroit. Il ne serait pas docilement y aller tout le temps. J'ai vu ce message et c'était logique, alors j'ai créé des variables pour les sélecteurs que j'appelais plus d'une fois. N'a même pas été aussi loin que d'utiliser css pour régler la position, donc j'utilise toujours offset. Néanmoins, le problème du saut a complètement disparu, je ne peux plus faire que le positionnement de l'info-bulle ne soit plus détraqué. J'ai perdu du temps là-dessus, comme on pourrait s'y attendre pour quelqu'un de nouveau, mais je vais toujours déclarer les variables dès le début. D'ailleurs, c'est comme cela que nous l'avons fait à Delphes.

Answer 3

La fonction Jquery .offset() ne fonctionne pas correctement lorsque l'élément est masqué. Voir le poste: jquery: get the offset of hidden element