JS double mouseover

Question

I am trying to pass a custom attribute to a script. If I pass it this way:

$('a.load-local-image').cluetip( {
    local:true, 
    leftOffset: $("#par-1").attr("leftpos")
);

it works fine. However, I need to pass attribute of the current element, not just par-1. If I try it this way:

$('a.load-local-image').cluetip( {
    local:true, 
    leftOffset: $(this).attr("leftpos")
);

the function sees the parameter as not being passed at all. So, I tried wrapping the function in mouseenter():

$('a.load-local-image').mouseenter( {
    $(this).cluetip( {
        local:true, 
        leftOffset: $(this).attr("leftpos")
    });
});

which works fine except I have to mouseover twice before the cluetip script runs. I even tried preloading cluetip() this way:

$('a.load-local-image').cluetip();
$('a.load-local-image').mouseenter( {
    $(this).cluetip( {
        local:true, 
        leftOffset: $(this).attr("leftpos")
    });
});

and it still does the same thing. I also tried mouseover, mouseout, mouseleave, hover and every other mouse-related function I can think of.

For some inexplicable reason, the problem seems to be related to $(this). If I use anything except $(this) as a parameter, everything works fine. Unfortunately, the only way I pass the current element is $(this) unless someone has an idea how I can get it otherwise.

Here is the markup:

<div id="par-1">
    <a id="load-local" class="load-local-image featurelink" title="" href="" rel="#whatever" leftpos="220" toppos="48">
    <img src="images/image.jpg" alt="" class="featureimg"></a> 

Any ideas on what is happening?

Answer 1

passing this to cluetip will mean the global window object, not the current element. To get the current element, put it inside an each statement and initialize each cluetip one by one:

$('a.load-local-image').each(function () {
    var element = $(this);

    element.cluetip({
        local:true, 
        leftOffset: element.attr("leftpos")
    });
});