jquery onmouseover of an image/link shows a div at the same position (tooltip)
-
06-07-2019 - |
Question
i want hover over an image -> which is in an link
during i'm over the image should popup (like a tooltip) an div, which i can fill also with some stuff - any idea?!
$this is the link which includes an img: i found the image within and wanted to span a div above the image and make some jquery effects which lets the user get the info, that clicking the image wil enlarge it
$(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!")
does not work :-/
Solution
I believe you are looking for a tooltip function, there are quiet a few tooltip plugins already available, even with custom content, text, formatted text, custom layout, or even ajax content.
take a look at one of these plugins:
- 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
some have more options than the other, i used simpletip for some site and its great though its limited contentwise, what you want is probably more something like Qtip