I don't think my variables are being passed to jQuery

Question

I'm trying to change the offset based on the State that is currently being hovered over and pass the two attributes ("data-doff" and "data-yoff") to the tooltipster plugin so that when you hover over a state, the name pops up in the tooltip in the centre of the State, but it's not working. I had used "alert()" to have it tell me what it found and it can read the attributes, it's just not using them, but I don't understand what I'm doing incorrectly. Any ideas?

My jQuery script:

$( document ).ready(function() {
    $('.showState').hover(function () {

        var xoff = $(this).attr('data-xoff');
        var yoff = $(this).attr('data-yoff');

        $('.tooltip').tooltipster({
            animation: 'grow',
            delay: 0,
            theme: '.ads-theme',
            arrow: false,
            offsetX: xoff,
            offsetY: yoff
        });
        return false;
    });
});

Relevant HTML

<area shape="poly" alt="California" title="California" coords="111...363" href="usa_py_expander.asp?lang=<%=mapLanguage%>&regionID=126" class="py_display fancybox-iframe tooltip showState" data-width="260" data-height="350" data-xoff="0" data-yoff="-150">

Answer 1

Generally, plugins need to be initialized on DOM ready, not when the event that should trigger them occurs. You probably need to do something like this:

$( document ).ready(function() {
    $('.showState').each(function () {
        $this = $(this);

        var xoff = $this.attr('data-xoff');
        var yoff = $this.attr('data-yoff');

        $this.tooltipster({
            animation: 'grow',
            delay: 0,
            theme: '.ads-theme',
            arrow: false,
            offsetX: xoff,
            offsetY: yoff
        });
    });
});

It's also preferable to use data('whatever') instead of attr('data-whatever').