Using multiple HTML tooltips always returns the first tooltipster occurence
See original GitHub issueI’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
Issue Analytics
- State:
- Created 7 years ago
- Comments:5
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:
You’re welcome. Je t’en prie 😃