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
(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 ???
(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!!
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??