Using multiple HTML tooltips always returns the first tooltipster occurence

I’ve been trying for two days to figure out how to use HTML inside mutiple non-cloned tooltips as suggested in the Tooltipster homepage. The issue I run into is:

When using detach() with multiple tooltips, it (i) always returns the first occurrence and (ii) there is an additionnal glitch: the content display the first occurence then blinks and disappears when hovering on other tooltips. For example, using:

$(document).ready(function() {
            $('.tooltip').tooltipster({
            contentAsHTML: true,
                        content: $('#tooltip_content').detach(),
            contentCloning: false
            });
        });

and:

<img src="Pics/Front.png" alt="Front" border="1" class="tooltip" />
<span id="tooltip_content"> toto </span>
<img src="Pics/Far.png" alt="Far" border="1" class="tooltip"/>
<span id="tooltip_content"> titi </span>
<img src="Pics/Side.png" alt="Side" border="1" class="tooltip"/>
<span id="tooltip_content"> tutu </span>

will always returns ‘toto’ no matter the <img> we’re hovering over. And it also produces the above mentionned glitch with a empty tooltip when hovering out the img.

I tried another approach in directly altering the ‘content’ using $(this). However, it also returns ‘toto’. For example:

$(document).ready(function() {
            $('.tooltip').tooltipster({
            contentAsHTML: true,
            content: $(this).find('.tooltip').attr('alt'),
            contentCloning: false
            });
        });

and:

<img src="Pics/Front.png" alt="Front" border="1" class="tooltip" />
<img src="Pics/Far.png" alt="Far" border="1" class="tooltip"/>
<img src="Pics/Side.png" alt="Side" border="1" class="tooltip"/>

Will always return ‘Front’ (without the glitch this time). I also tried: content: $(this).attr('alt'), but it returns an ‘undefined’ string instead.

Thus my question is: how to succeed in using mutiple HTML tooltips in the same HTML page ? I’d prefer to avoid the encoded markup in the title attribute.

Thank you

[louisameline]

That’s because of the structure of your HTML. I overlooked the fact that you were putting tooltips on images. So try something like this instead:

<img id="tooltip_1" src="Pics/Front.png" alt="Front" border="1" class="tooltip" />
<div id="tooltip_1_content">This is tooltip 1</div>
<img id="tooltip_2" src="Pics/Far.png" alt="Far" border="1" class="tooltip"/>
<div id="tooltip_2_content">This is tooltip 2</div>
<img id="tooltip_3" src="Pics/Side.png" alt="Side" border="1" class="tooltip"/>
<div id="tooltip_3_content">This is tooltip 3</div>

$('.tooltip').tooltipster({
    theme: 'tooltipster-noir',
    animation: 'slide',
    delay: 100,
    functionInit: function(instance, helper){
        var id = $(helper.origin).attr('id'),
            content = $('#' + id + '_content').detach();
        instance.content(content);
    }
});

[louisameline]

You’re welcome. Je t’en prie 😃