Display popup with text and graphics on mouse over

Question

Hi, I want to have a popup window such that when the user hovers mouse over the image, it displays that popup window on the right of the image. The window would contain text as well as graphics. The window should close the moment my mouse is out of the image. I tried various scripts that are on the internet, but they show the text as innerhtml of the same page. So that breaks my original page. Is there a way to have a box with text and graphics come up when I roll over the image and go away when I close it?

Answer 1

Check out jQuery qtip -- http://craigsworks.com/projects/qtip/

Demos: http://craigsworks.com/projects/qtip/demos/

---

Edit: Sample Code (straight from QTip's demo site). This will give the effect seen on http://craigsworks.com/projects/qtip/demos/content/basic

<script type="text/javascript" src="your/path/to/qtip.js"></script>
<script type="text/javascript">
// Create the tooltips only on document load
$(document).ready(function() 
{
   // Match all link elements with href attributes within the content div
   $('#content a[href]').qtip(
   {
      content: 'Some basic content for the tooltip' // Give it some content, in this case a simple string
   });
});
</script>

Answer 2

If you need to catch only mouseover and mouseleave events, maybe you should simply try to use only CSS and :hover selector on image or div, if target browsers let it.