[Solved] Load div in qtip

[nharry]

Firstly I would like to say what an excellent plugin this is (so many options )

I have a question, I would like to load a div using qtip and am unsure how to go about it.

This is the JS i have:

$('.moviebox').qtip({
content: [load div class info here],
show: 'mouseover',
hide: 'mouseout',
style: { name: 'dark' },
position: {
corner: {
target: 'bottommiddle',
tooltip: 'bottomleft'
}
}
})

And this is the html:


<div class="movieboxwrapper">
<div class="moviebox"><a href="#"><img src="/moviesite/images/covers/beethovens_second.jpg" /></a>
<div class="info">film about a dog</div>
</div>
</div>

<div class="movieboxwrapper">
<div class="moviebox"><a href="#"><img src="/moviesite/images/covers/matrix.jpg" /></a>
<div class="info">This movie is about a guy who thinks hes cool because his world is green writing</div>
</div>
</div>



I want the div with the class info to be shown when a user hovers the moviebox. If i have made no sense let me know.



Help please

[sveiki]

JS Code

$('.moviebox').qtip({
  content: $(this).children('.info'),
   show: 'mouseover',
   hide: 'mouseout',
   style: { name: 'dark' },
   position: {
      corner: {
         target: 'bottommiddle',
         tooltip: 'bottomleft'
      }
   }
});
 
// since the qTip copies the content of the info div, you can remove it now
$('.moviebox').remove('.info');

[nharry]

(22nd March 20:30)sveiki Wrote:  

JS Code

$('.moviebox').qtip({
  content: $(this).children('.info'),
   show: 'mouseover',
   hide: 'mouseout',
   style: { name: 'dark' },
   position: {
      corner: {
         target: 'bottommiddle',
         tooltip: 'bottomleft'
      }
   }
});
 
// since the qTip copies the content of the info div, you can remove it now
$('.moviebox').remove('.info');

Thanks for the help. Still have a problem. It seems that $(this) doesn't work. The qtip appears but box is blank.

When I change the code to:

$('.moviebox').qtip({
content: $('.moviebox').children('.info'),
show: 'mouseover',
hide: 'mouseout',
style: { name: 'dark' },
position: {
corner: {
target: 'bottommiddle',
tooltip: 'bottomleft'
}
}
});

The text appears in the box but that is incorrect because it shows the same text on all images.

Any ideas ???

[sveiki]

Try this instead:

JS Code

$('.moviebox').each(function() {
   $(this).qtip({
      content: $(this).children('.info'),
      show: 'mouseover',
      hide: 'mouseout',
      style: { name: 'dark' },
      position: {
         corner: {
            target: 'bottommiddle',
            tooltip: 'bottomleft'
         }
      }
   });
});
 
// since the qTip copies the content of the info div, you can remove it now
$('.moviebox').remove('.info');

[nharry]

(22nd March 21:45)sveiki Wrote:  Try this instead:

JS Code

$('.moviebox').each(function() {
   $(this).qtip({
      content: $(this).children('.info'),
      show: 'mouseover',
      hide: 'mouseout',
      style: { name: 'dark' },
      position: {
         corner: {
            target: 'bottommiddle',
            tooltip: 'bottomleft'
         }
      }
   });
});
 
// since the qTip copies the content of the info div, you can remove it now
$('.moviebox').remove('.info');

Working like a dream. Many Many Many thanks. YOU THE MAN!!

[cammo]

I can't for the life of me get this tooltip to work?!

I think I want to do something similar to this..
I want to have images on page whihc when hovered over popup a tooltip which has content taken from a hidden div on the page.

This content will have some text and an image and I want it to fade into view and fade out on mouseout.

I tried copying and pasting the below code and using the Jquery script (packaged one as well as the latest 1.4.2min) and I cannot get any tooltip to appear?!

I inserted the above code into my head like so:

JS Code

<script type="text/javascript">
$(document).ready(function() {
$('.moviebox').each(function() {
   $(this).qtip({
      content: $(this).children('.info'),
      show: 'mouseover',
      hide: 'mouseout',
      style: { name: 'dark' },
      position: {
         corner: {
            target: 'bottommiddle',
            tooltip: 'bottomleft'
         }
      }
   });
});
 
// since the qTip copies the content of the info div, you can remove it now
$('.moviebox').remove('.info');
});
</script>

used the same HTML:

JS Code

<div class="movieboxwrapper">
<div class="moviebox"><a href="#"><img src="images/logo_smallwhite.png" /></a>
<div class="info">film about a dog</div>
</div>
</div>
 
<div class="movieboxwrapper">
<div class="moviebox"><a href="#"><img src="images/logo_smallwhite.png" /></a>
<div class="info">This movie is about a guy who thinks hes cool because his world is green writing</div>
</div>
</div>

and placed the scripts just before the </body> tag like so:

JS Code

<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="js/jquery.qtip-1.0.0-rc3.min.js"></script>

And I get nothing??