Find and attach container dynamically

Question

HTML:

a#myname
div#tooltip-myname

a#yourname
div#tooltip-yourname

jQuery:

$('#myname').tooltip($('#tooltip-myname'));
$('#yourname').tooltip($('#tooltip-yourname'));

How do I automate the tooltip container part so I don't have to manually enter '#tooltip-myname' '#tooltip-yourname' and so on with each tooltip?

Thanks!

Answer 1

You can use a .each() loop, like this:

$('#myname, #yourname').each(function() {
 $(this).tooltip($('#tooltip-' + this.id));
});

If those elements had a class, it gets easier to maintain, for example if they both had class="hasTooltip" you could use .class selector instead, like this:

$('.hasTooltip').each(function() {
 $(this).tooltip($('#tooltip-' + this.id));
});

Then you could add as many as you wanted without editing the script.