[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]

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

$('.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]

(23rd March 06:30)sveiki Wrote:  

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

$('.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:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17

$('.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]

(23rd March 07:45)sveiki Wrote:  Try this instead:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17

$('.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:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21

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

1 2 3 4 5 6 7 8 9 10 11

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

1 2	<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??