Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP

Loading…

Pass the object to the :content option #1

Closed
abrcoelho opened this Issue · 6 comments

2 participants

@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
Owner

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
Owner

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
Owner

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!

@abrcoelho abrcoelho closed this
@briancray
Owner

I'd love to hear it!

Cheers

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Something went wrong with that request. Please try again.