CODEWITHSUNDEEP
jqueryajaxtooltiptooltipster
Захар Joe
Захар Joe

Reputation: 693

Generate a tooltip in Tooltipster based on the contents of the element

I'm using a Tooltipster library to generate tooltip and used their simple AJAX-custom-function example as a basis. I need to modify that though so instead of querying a static "http://example.com/ajax.php" as seen in their example it would instead get "http://example.com/ajax.php?id=contents_of_the_element_being_clicked". So for example, if I have a <span>textbook</span> in my HTML, the contents link for the popup would be "http://example.com/ajax.php?id=textbook".

I've successfully repurposed the example to activate on every <span>, what I cannot do is understand how to bring the innerHTML contents of that <span>.

So all I'm looking for is that one line that populates a variable with the element's contents which I can later append to a $.get ... function(data) request.

Upvotes: 1

Views: 1281

Answers (1)

ventiseis
ventiseis

Reputation: 3099

You can use use the html() function from jquery to extract the inner html. Furthermore, you can use param() to encode the extracted html.

var param = "?" + $.param({ id: origin.html() });

Full example (working with Tooltipster 3.3.0 and jQuery 1.10):

$('.tooltip').tooltipster({    
    functionBefore: function(origin, continueTooltip) {
        var param = "?" + $.param({ id: origin.html() });       
        if (origin.data('loaded') !== true) {
            $.get('example.com/ajax.php' + param, function(data) {
                origin.data('loaded', true);
                origin.tooltipster('content', data.id);
                continueTooltip();
            });            
        }
        else {
            continueTooltip();        
        }
    }
});

Tooltipster Version 4:

$('.tooltip').tooltipster({    
    content: 'Loading...',
    functionBefore: function(instance, helper) {
        var $origin = $(helper.origin);
        var param = "?" + $.param({ id: $origin.html() });       
        if ($origin.data('loaded') !== true) {
            $.get('example.com/ajax.php' + param, function(data) {
                instance.content(data.id);
                $origin.data('loaded', true);
            });            
        }
    }
});

HTML:

<span class="tooltip" title="This is my span's tooltip message!">Some text test</span>

Upvotes: 1

Related Questions