JQuery Onmouseover eines Bildes/Link zeigt eine DIV an derselben Position (Tooltip)
-
06-07-2019 - |
Frage
Ich möchte über ein Bild schweben ->, das sich in einem Link befindet
Während des Übers "Ich bin über das Bild" sollte Popup (wie ein Tooltip) ein Div, das ich auch mit einigen Dingen füllen kann - eine Idee?!
$ Dies ist der Link, der ein IMG enthält: Ich habe das Bild innerhalb des Bildes gefunden und wollte ein Div über dem Bild überspannen und einige jQuery -Effekte erstellen, mit denen der Benutzer die Informationen erhalten kann, die auf das Bild klicken werden.
$(this).parent().append($("<div/>")
.css({ "display" : "block", "left" : img.x, "top" : img.y,
"width" : img.width, "heigth" : img.heigth, "border" : "1px solid red"})
.text("Click me!")
funktioniert nicht :-/
Lösung
Ich glaube, Sie suchen nach einer Tooltip -Funktion. Es sind bereits ein paar Tooltip -Plugins verfügbar, auch mit benutzerdefinierten Inhalten, Text, formatiertem Text, benutzerdefiniertem Layout oder sogar AJAX -Inhalten.
Schauen Sie sich eines dieser Plugins an:
- QTIP -Plugin: http://craigsworks.com/projects/qtip/
- JQuery Plugin Tooltip: http://bassistance.de/jquery-plugins/jquery-plugin-tooltip/
- SimpleTip: http://craigsworks.com/projects/simpletip/
- Cluetip: http://plugins.learningjquery.com/cluetip/
- wtooltip: http://wayfarerweb.com/wtooltip.php
Einige haben mehr Optionen als das andere. Ich habe Simpletip für eine Website verwendet und es ist großartig, wenn auch begrenzt inhaltlich. Was Sie wollen, ist wahrscheinlich eher so etwas wie QTIP