qTip Reference Image Element

Hey I'm a using a Jquery plugin called qTip to create an image rollover effect on a bunch of thumbnails. I need to get the src of the image tag that is being rolled over, and I'm having a hard time finding examples of this. I figu开发者_高级运维red that the $(this).src would work, but it's referencing the tooltip instead of the image. Any ideas?

The question is ... When are you trying to acquire the source and how is your HTML and qTip initialization setup? Which version of qTip and jQuery are you using? The answers to these questions are going to determine how you do what you are looking to do. I'll assume you're using qTip2.

Initializing via an $.each() loop changes the meaning of $(this) to reference the target, and is probably what you're looking for. But note that within the event callbacks, you should probably use the API:

$(document).ready(function()
{
    $('img.thumbnail').each(function() {
        $(this).qtip({
            // within an $.each() loop, $(this) refers to the trigger/target
            content: $(this).attr('src'),
            events: {
                show: function(event, api) {
                    // To reference the original trigger, use the
                    // API's elements property to get a reference
                    // to the trigger
                    alert(api.elements.target.attr('src'));
                }
            }
        });
    });
});

If you wanted to find something within the rendered qTip, you can also use the API as it has object references for pretty much every part of the tooltip. For example:

 api.elements.content.find('img').attr('src');

Would return all of the src attributes for images within the rendered tooltip itself.

See the documentation for more detail:

http://craigsworks.com/projects/qtip2/docs/api/#elements

Here's a working example of the above on jsFiddle.net:

http://jsfiddle.net/kiddailey/AAaUk/

Note that if you're using jQuery 1.6 and depending on your needs, you may want to substitute .attr() with .prop().

qTip uses the following div layout:

<div class="qtip qtip-stylename">
   <div class="qtip-tip" rel="cornerValue"></div>
   <div class="qtip-wrapper">
      <div class="qtip-borderTop"></div> // Only present when using rounded corners
      <div class="qtip-contentWrapper">
         <div class="qtip-title"> // All CSS styles...
            <div class="qtip-button"></div> // ...are usually applied...
         </div>
         <div class="qtip-content"></div> // ...to these three elements!
      </div>
      <div class="qtip-borderBottom"></div> // Only present when using rounded corners
   </div>
</div>

Meaning when you put in an img:

 $('#content a[href]').qtip({
      // Simply use an HTML img tag within the HTML string
      content: '<img src="/projects/qtip/images/owl_small.png" alt="Owl" />'
   });

You can find it by looking for img under .qtip-content for your current element.

If you post your code where you are getting $(this) we can help you a bit more with the specifics.

An example (without seeing your code) would be:

var mysrc = $(this).find('.qtip-content img').eq(0).prop('src');