jquery onmouseover of an image/link shows a div at the same position (tooltip)

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 :-/

Answer 1

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