CODEWITHSUNDEEP
jquerytooltip
toby
toby

Reputation: 11

Jquery UI Tooltip - Passing parameters into Content

I am trying to use dynamically generated content for a series of tooltips on a page.

The tooltip triggers and targets are generated by a CMS, with the triggers placed inline and the targets (which contain the HTML content I wish to display as the tooltip) are inside a hidden div at the foot of the page.

I use a pair of data tags (data-referencenumberlinks and data-referencenumbertargets) to identify each trigger and target relationship, and I run each type through an index to generate unique numerical references for the pairs.

So far so good. I cannot figure out how to pass the index number from the trigger (data-referencenumberlinks) into the content: option of the tooltip function (you'll see I'm using a var called thisContent (currently hard-coded as "1") in the example.

I have tried setting thisContent to:

$(this).attr('data-referencenumberlinks', index);

and various versions of this but without success - can any body advise how I should create a variable that contains the data-referencenumberlinks of the active tooltip and allows tooltip to display the corresponding data-referencenumbertargets?

Thanks.

JS:

$(document).ready(function(){

    $('.tooltipFramework').each(function (i, obj) {
        index = $('.tooltipFramework').index(this);
        $(this).attr('data-referencenumbertargets', index);
    });

    $('.tooltipTrigger').each(function (i, obj) {
        index = $('.tooltipTrigger').index(this);
        $(this).attr('data-referencenumberlinks', index);
    });    
    var thisContent = 1;
    $('.tooltipTrigger').tooltip({        
        content: $('[data-referencenumbertargets="' + thisContent + '"]')
    });
});

Upvotes: 1

Views: 825

Answers (1)

toby
toby

Reputation: 11

ah - typical spend days trying for a fix, ask the experts at stackoverflow, then realise how to solve it yourself minutes later!

for reference, I used this approach:

 $('.tooltipTrigger').each(function (i, obj) {
    index = $('.tooltipTrigger').index(this);
    $(this).attr('data-referencenumberlinks', index);
    console.log('index is ' + index);
    $(this).tooltip({ content: $('[data-referencenumbertargets="' + index + '"]') });
});

effectively running the tooltip against each element during the index phase - 

$(this).tooltip({ content: $('[data-referencenumbertargets="' + index + '"]') });

Thanks anyway guys.

Upvotes: 0

Related Questions