Mini-Bildschirm Popups auf Maus über

Question

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

Aber ich versuche den folgenden Effekt zu erhalten:

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

ich mich gefragt, ob jemand hier könnte mir helfen, herauszufinden versuchen, wie diese Wirkung zu erreichen, wie im Bild zu sehen? :/

Der Effekt, wie im Bild zu sehen ist, dass, wenn ich über ein Bild schweben, oder was auch immer ich "onmouseover" Ereignis zu binden, ein "Popup" angezeigt wird, Text und andere Informationen, die ich möglicherweise muss Anzeige.

Vielen Dank im Voraus!
-Zack

P.S. Sorry für das Beispiel von WoW; Es ist das Einzige, woran ich denken könnte, wenn ich versuche, diesen Effekt zu beschreiben.

Answer 1

Heres einige Pseudo-Code, den Sie zu erhalten begonnen:

binden Mouseover-Ereignis Link - in jquery: $('a.popup').mouseover(function(){ /* code here */ });

bei Position Maus finden
erstellen (oder bereits erstellt verwenden) div zu halten Ihre Informationen
Ort div in das Körperelement direkt so können Sie absolut positionieren es
die Mausposition verwenden Sie früher gefunden Ihre div an der Maus (oder relativ zur Maus)

zu positionieren

binden Mausereignis aus
in dem Fall zu verbinden das absolut positionierte DIV

anwenden schöne Stile in der Stilvorlage :)

Das ist alles, was es zu ausblenden. Es ist nicht so schwer - wenn Sie jquery verwenden, ist all das Zeug in den Dokumenten.

Hoffnung hilft diese

Answer 2

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

qTip scheint ziemlich gut zu sein.

Answer 3

MooTools auch einige nette Maus-Tipps hat:

MooTools docs: Tips Class

Demo/Tutorial