jQuery Tools: Tooltip, jQuery reference to "this" attribute

Question

I'm implementing a Tooltip for cells within table and I need to be able to grab the target's data-message attribute.

$("#pricing_plans_table .sku_tooltip").tooltip({

        // each trashcan image works as a trigger
        tip: '#' + $(this).attr('data-message'),

        // move tooltip a little bit to the right
        offset: [0, 15],

        // there is no delay when the mouse is moved away from the trigger
        delay: 0
    });

That doesn't work. I get "Cannot find tooltip for [object Object]" ... I'm not quite sure how to reference the target correctly.

Answer 1

I'm not sure how you do this inside the tooltip plugin however you can use an .each() loop to get the value and initialize the tooltip plugin for each element (internally this is all the plugin probably does anyway):

$("#pricing_plans_table .sku_tooltip").each(function (index, value) {
    var $this = $(this);
    $this.tooltip({
        tip    : '#' + $this.attr('data-message'),
        offset : [0, 15],
        delay  : 0

    });
});

Answer 2

I don't think you can use this inside a map like that. Try:

$("#pricing_plans_table .sku_tooltip").each(function(i,el) {
    var tipstr = $(this).attr('data-message');
    $(this).tooltip({
        tip: '#' + tipstr,
        offset: [0, 15],
        delay: 0
    });    
});