Post Reply 
 
Thread Rating:
  • 0 Votes - 0 Average
  • 1
  • 2
  • 3
  • 4
  • 5
[Solved] Load div in qtip
22nd March, 19:07 (This post was last modified: 22nd March 19:11 by nharry.)
Post: #1
Wink [Solved] Load div in qtip
Firstly I would like to say what an excellent plugin this is (so many options Smile)

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
Find all posts by this user
Quote this message in a reply
22nd March, 20:30
Post: #2
RE: Load div in qtip
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');
Find all posts by this user
Quote this message in a reply
22nd March, 21:24
Post: #3
RE: Load div in qtip
(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 ???
Find all posts by this user
Quote this message in a reply
22nd March, 21:45
Post: #4
RE: Load div in qtip
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');
Find all posts by this user
Quote this message in a reply
22nd March, 21:50
Post: #5
RE: Load div in qtip
(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!!
Find all posts by this user
Quote this message in a reply
31st May, 13:09
Post: #6
RE: Load div in qtip
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??
Find all posts by this user
Quote this message in a reply
Post Reply 


Possibly Related Threads...
Thread: Author Replies: Views: Last Post
  show qtip in a specified div or position myapweb 1 241 27th December 17:53
Last Post: Craig
  [Solved] QTip content from existing div element on page? dcash 4 1,843 8th December 18:29
Last Post: Craig
  [Solved] Problem with Fixed Position div and scrolling homerlex 7 830 26th October 19:35
Last Post: Craig
  [Solved] Part of autosuggest div that overflows qtip is hidden jstewmc 3 1,307 25th August 18:27
Last Post: Craig
  [Solved] Qtip and Lazy Load Plugin [Solved] usman 3 736 9th August 17:31
Last Post: Craig
  [Solved] Add div tage in Qtip. Elango 1 805 12th July 17:31
Last Post: Craig
  [Solved] Is div of qtip can move? igood 9 1,959 3rd July 23:01
Last Post: Sempiterna
Question [Solved] Can't bind qtip to a div??? SDirk 1 588 20th June 17:18
Last Post: Craig
  [Solved] Loading qtip on page load daysleeper 2 680 15th June 01:46
Last Post: daysleeper
Sad Trying to load Dynamic Content using qTip v1 sman1 1 839 6th June 11:38
Last Post: Craig



User(s) browsing this thread: 1 Guest(s)