Opening a popup with iFrame on mouseover

Question

I'm working on this project which requires this feature. When I hover over an image, it should open a small box next to it (like tooltip) and load a link there (probably an iFrame).

 <script>
  $(function() {
    $( document ).tooltip();
  });
  </script

I tried to do this via tooltip (tried manipulating the tolltip so that it could open a small box and load an iFrame), but that didn't work as well. Due to my limited knowledge in JavaScript/ jQuery. I couldn't find any viable solution.

What should I do to make it work like require ?

Any suggestions are appreciated.

Answer 1

you could do something like this

Demo

the html:

<div id="hoverMe">Hover over here</div>
<iframe id="tooltip" src="http://jsfiddle.net"></iframe>

the jQuery:

$('#hoverMe').hover(function () {
    $('#tooltip').fadeIn();
}, function () {
    $('#tooltip').fadeOut();
});