Pass the object to the :content option

[abrcoelho]

When using tooltipsy on a link and trying to fetch the content with AJAX, I couldn't get the link's href.

<a class="tooltipsy" href="?option=10">List item</a>

So I had no choice but to use the hard-coded URL for the request (like the original sample):

$('.hastip').tooltipsy({
    content: function () {
        var $el = $(this);
        $.get('api.php', function (data) {
            $el.html(data).show();
        });
        return 'Fallback content';
    },
    css: {
        'padding': '10px',
        'max-width': '200px',
        'color': '#303030',
        'background-color': '#f5f5b5',
        'border': '1px solid #deca7e',
        '-moz-box-shadow': '0 0 10px rgba(0, 0, 0, .5)',
        '-webkit-box-shadow': '0 0 10px rgba(0, 0, 0, .5)',
        'box-shadow': '0 0 10px rgba(0, 0, 0, .5)',
        'text-shadow': 'none'
    }
});

Is there a way that I'm missing or is it really an issue? Thanks in advance.

[briancray]

Are you trying to get ?option=10 as the URL for the AJAX call?

If so, it's:

$('.hastip').tooltipsy({
    content: function () {
        var $el = $(this);
        $.get($el.attr('href'), function (data) {
            $el.html(data).show();
        });
        return 'Fallback content';
    },
    css: {
        'padding': '10px',
        'max-width': '200px',
        'color': '#303030',
        'background-color': '#f5f5b5',
        'border': '1px solid #deca7e',
        '-moz-box-shadow': '0 0 10px rgba(0, 0, 0, .5)',
        '-webkit-box-shadow': '0 0 10px rgba(0, 0, 0, .5)',
        'box-shadow': '0 0 10px rgba(0, 0, 0, .5)',
        'text-shadow': 'none'
    }
});

[abrcoelho]

That's exactly what I'm trying to say, but I get a "undefined" on my console.log when I try to get the href via $el.attr('href'). I checked and all links are alright.

It seemed to me that $el was returning the tooltip element, not the hovered element.

[briancray]

OMG you're right. Sorry, working on something else so brain is elsewhere. Lemme do a quick update and get back to you :P

[briancray]

Updated code. Try this.

$('.hastip').tooltipsy({
    content: function () {
        var $el = $(this);
        $.get($el.data('rootel').attr('href'), function (data) {
            $el.html(data).show();
        });
        return 'Fallback content';
    },
    css: {
        'padding': '10px',
        'max-width': '200px',
        'color': '#303030',
        'background-color': '#f5f5b5',
        'border': '1px solid #deca7e',
        '-moz-box-shadow': '0 0 10px rgba(0, 0, 0, .5)',
        '-webkit-box-shadow': '0 0 10px rgba(0, 0, 0, .5)',
        'box-shadow': '0 0 10px rgba(0, 0, 0, .5)',
        'text-shadow': 'none'
    }
});

[abrcoelho]

Wow, it was a "really quick update". And it worked like a charm! =)

Thanks a lot! Later I'll give you a feedback about my experience with tooltipsy on this project!

[briancray]

I'd love to hear it!

Cheers