Simple qtip for images in a list

[oneworld95]

Hi. I'm using the 1.0.0-rc3 version of qtip on FF 3.6.3. I'm trying to use the title attribute from the below images to generate qtips but have had no luck:

JS Code

<ul class="flatList social-footer" id="social">
  <li><img src="global/img/icons/social_24/facebook.png" width="24" height="24" class="glow" title="Share on Facebook"
      />
        </li>
    <li ><img src="global/img/icons/social_24/twitter.png" width="24" height="24" class="glow" title="Share on Twitter" />
 
    </li>
    <li ><img src="global/img/icons/social_24/youtube.png" width="24" height="24" class="glow" title="Share on YouTube"/>
      </li>
    <li ><img src="global/img/icons/social_24/flickr.png" width="24" height="24" class="glow" title="Share on Flickr"/>
 
    </li>
</ul>

Here's what I've tried:

JS Code

$(document).ready(function(){
	   $('#social li img[title]').each(function()
	   {
		  $(this).qtip({
			 content: $(this).attr('title'), // Use the tooltip attribute of the element for the content
			 style: 'light' // Give it a crea mstyle to make it stand out
           });
	   });
});

It keeps giving this error:

JS Code

Error: f(this).data("qtip") is null
Source File: http://localhost/cms/global/js/qtip/jquery.qtip-1.0.0-rc3.min.js
Line: 15

What am I doing wrong? Thanks.

[Craig]

oneworld, you don't need to specify the title as teh content as this is done as a fallback anyway:

JS Code

$(document).ready(function(){
      $('#social li img[title]').qtip({
          style: 'light' // Give it a crea mstyle to make it stand out
      });
});

[scylla]

So how would you expand this to have the qtip show an enlarged image + some html code instead of the usual small text provided in a tltle or alt of an image attribute?

[kiddailey]

Once I need more than basic text, I usually go with hidden elements (eg. a SPAN or DIV). But you can put HTML in the title/alt tag and it works as well:

JS Code

<p>
	<a class="trigger" href="#" title="<img src='/path/to/image.jpg' width='100%' /><br >Some <b>more</b> HTML.">Trigger</a>
</p>

Working demo:

http://jsfiddle.net/kiddailey/q5vFh/

Edit: Sorry for the invalid "br" tag, but the forum software strips it out if I use a self-closing tag even in the code block :/

[scylla]

Thanks for the nice working example.

Now the image example I am having a problem having the image QTIP to align properly.


So if the image is [HERE] and say its 75x75 pixels, the qtip is aligning at the very bottom right of the image and the position is being done on 'event'.

Any idea how to have the qtip pointing to the left, positioned to the right of the image and center dead in the middle so 36 pixels from the top of the image and 36 pixel from the bottom?

[kiddailey]

The positioning documentation will probably answer that question for you:

http://craigsworks.com/projects/qtip/doc.../#position

[scylla]

(27th March 03:34)kiddailey Wrote:  The positioning documentation will probably answer that question for you:

http://craigsworks.com/projects/qtip/doc.../#position

That part I can get, the pointer/arrow in the popup. But the popup is below the image..