Mini-Screen-Popups auf der Maus

Question

Ich kann nicht herausfinden, wie ich diese Frage formulieren kann, um ehrlich zu sein. :/

Aber ich versuche den folgenden Effekt zu erzielen:

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

Ich habe mich gefragt, ob mir jemand hier helfen könnte, herauszufinden, wie ich diesen Effekt im Bild bewirken kann. :/

Der Effekt, wie im Bild zu sehen ist, ist, dass ein "Popup", wenn ich über ein Bild über ein Bild schwebe oder was auch immer ich bin, "Onmouseover" -Ereignis bin, das Text und andere Informationen angezeigt wird, die ich möglicherweise anzeigen muss.

Danke im Voraus!
-Zack

PS Entschuldigung für das Beispiel von WOW; Es ist das einzige, was ich mir vorstellen könnte, wenn ich versuche, diesen Effekt zu beschreiben.

Answer 1

Hier ist ein Pseudo -Code, damit Sie loslegen:

Binden Sie das Mouseover -Ereignis zu verknüpfen - in jQuery: $('a.popup').mouseover(function(){ /* code here */ });

Finden Sie die Position der Maus
Erstellen (oder verwenden Sie bereits erstellt) div, um Ihre Informationen zu enthalten
Legen Sie Div in das Körperelement direkt in das Körperelement, damit Sie es absolut positionieren können
Verwenden Sie die zuvor gefundene Mausposition, um Ihre DIV an der Maus (oder relativ zur Maus) zu positionieren.

Binden Sie das Mouse -Out -Ereignis an die Verbindung
Falls die absolut positionierte Info Div verstecken

Wenden Sie schöne Stile im Stylesheet an :)

Das ist alles dazu. Es ist nicht so schwierig - wenn Sie JQuery all dieses Zeug in den Dokumenten verwenden.

Hoffe das hilft

Answer 2

Schauen Sie sich eines der vielen JQuery Tooltip -Plugins an.

qtip scheint ziemlich gut zu sein.

Answer 3

Mootools hat auch einige schöne Maus -Tipps:

Mootools Docs: Tipps Klasse

Demo/Tutorial