Using qTip tooltip to load data using AJAX. $(this) isn't what I expect it to be

Question

I have a grid of many images and each image has a CSS class set to it's unique ID.

Using this javascript code, I'd like to ask my server backend to construct an appropriate HTML summary of said element and return it.

$('.tier-items a img').qtip({
    content: {
        text: 'Loading...', // The text to use whilst the AJAX request is loading
        ajax: {
            url: '/Items/GetToolTip/' + $(this).attr("class"), //I assumed that $(this) would contain the element I moused over.
            type: 'GET', // POST or GET
            data: {} // Data to pass along with your request
        }
    },
    style: {
        classes: 'ui-tooltip-youtube ui-tooltip-shadow'
    },
    position: {
        my: 'bottom center',
        at: 'top center',
        effect: function (api, pos, viewport) {
            // "this" refers to the tooltip
            $(this).animate(pos, {
                duration: 600,
                easing: 'linear',
                queue: false // Set this to false so it doesn't interfere with the show/hide animations
            });
        }
    }
});

However it seems that in this case $(this) doesn't contain the element that has been moused over to invoke the qTip.

I need to invoke a url like:

/Items/GetToolTip/23

Instead I get:

/Items/GetToolTip/undefined?_=1334977600119

Is there some way to get the element where the QTip was invoked?

---

Tried this, and still no dice:

itemHoverId = 1;

//Construct the id, on mouseenter and use that instead of $(this)
$('.tier-items a img').mouseenter(function () {
    itemHoverId = $(this).attr("class");
    alert(itemHoverId);
});

$('.tier-items a img').qtip({
    content: {
        text: 'Loading...', // The text to use whilst the AJAX request is loading
        ajax: {
            url: '/Items/GetToolTip/' + itemHoverId, //I assumed that $(this) would contain the element I moused over.
            type: 'GET', // POST or GET
            data: {} // Data to pass along with your request
        }
    },

The resulting invoke is:

/Items/GetToolTip/1?_=1334978818620

Answer 1

The problem is that this is referring to whatever this is when the initialization method is called and not your image (ie probably your document ready) If you need an individual url for each img you could create a qtip widget individually

$('.tier-items a img').each(function() { $(this).qtip({
content: {
    text: 'Loading...', // The text to use whilst the AJAX request is loading
    ajax: {
        url: '/Items/GetToolTip/' + $(this).attr("class"), //I assumed that $(this) would contain the element I moused over.
        type: 'GET', // POST or GET
        data: {} // Data to pass along with your request
    }
}, ....