Question

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 figured that the $(this).src would work, but it’s referencing the tooltip instead of the image. Any ideas?

Answer 1

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().