popups mini-écran de la souris

Question

Je ne peux pas comprendre comment formuler cette question pour être honnête. : /

Mais je suis en train d'obtenir l'effet suivant:

http://zack.scudstorm.com/example.png

Je me demandais si quelqu'un ici pourrait me aider à essayer de comprendre comment accomplir cet effet comme on le voit dans l'image? : /

L'effet, comme on le voit dans l'image, est que lorsque je passe la souris sur une image, ou tout ce que je lie événement « onmouseover » à un « pop-up » s'affiche avec le texte et d'autres informations que je besoin d'afficher.

Merci à l'avance!
-Zack

P.S. Désolé pour l'exemple étant de WoW; c'est la seule chose que je pouvais penser en essayant de décrire cet effet.

Answer 1

Heres un code pseudo pour vous lancer:

événement de survol de liaison pour lier - dans jquery: $('a.popup').mouseover(function(){ /* code here */ });

en cas trouver la position de la souris
créer (ou utilisez déjà créé) div pour tenir vos informations
placer div dans l'élément de corps directement de sorte que vous pouvez placer absolument
utiliser la position de la souris que vous avez trouvé plus tôt pour positionner votre div à la souris (ou par rapport à la souris)

souris se lient à l'événement pour un lien
en cas cacher la div info position absolue

appliquer des styles agréables dans la feuille de style:)

C'est tout ce qu'il ya à faire. Son pas si difficile -. Si vous utilisez jquery tous ce genre de choses est dans la documentation

Hope this helps

Answer 2

Découvrez l'un des nombreux plugins infobulles jQuery.

Qtip semble être assez bon.

Answer 3

MooTools a quelques bons conseils de souris trop:

MooTools docs: classe Conseils

démo / Tutoriel