Tooltipster in Loop - tooltipster

Question

I'm trying to use Tooltipster to show an image of hovered thumbnails that are in a loop. I've tried multiple ways to find the closest tooltip_templates class and show it, but am not having any success. Is there another way?
<li class="finish-swatch">
<img class="tooltip" data-tooltip-content=".tooltip_content" src="/img01.jpg" />
<div class="tooltip_templates">
<span class="tooltip_content">
<img class="tooltip-swatch" src="/img01.jpg" />
</span>
</div>
</li>
<li class="finish-swatch">
<img class="tooltip" data-tooltip-content=".tooltip_content" src="/img02.jpg" />
<div class="tooltip_templates">
<span class="tooltip_content">
<img class="tooltip-swatch" src="/img02.jpg" />
</span>
</div>
</li>

Answer 1

According to the docs (5. Use HTML inside your tooltips)
This should work:
<li class="finish-swatch tooltip" data-tooltip-content="#tooltip_content_1"></li>
<li class="finish-swatch tooltip" data-tooltip-content="#tooltip_content_2"></li>
<div class="tooltip_templates">
<li id="tooltip_content_1">
<img class="tooltip-swatch" src="/img01.jpg" />
</li>
<li id="tooltip_content_2">
<img class="tooltip-swatch" src="/img02.jpg" />
</li>
</div>
Note: it is not recommended to use the class 'tooltip' as it may conflict with Bootstrap or other styles but I left it as you had it.
Also, make sure your CSS includes:
.tooltip_templates { display: none; }
Finally, your jQuery should include:
$(document).ready(function() {
$('.tooltip').tooltipster();
});
That should do it. Let me know if you have any questions!

Answer 2

Thanks Jay. I also got this to work a couple of days ago. This is how I did it.
<div class="tooltip">
<span class="tooltip_content">
<img src="<?php echo $finish_image['value']; ?>" />
<p><?php echo $finish_name['value']; ?></p>
</span>
<img src="<?php echo $finish_image['value']; ?>" alt="<?php echo $image['alt'] ?>" />
</div>
jQuery('.tooltip').tooltipster({
trigger: 'custom',
triggerOpen: {
mouseenter: true,
touchstart: true
},
triggerClose: {
mouseleave: true,
tap: true
},
side: ['top'],
maxWidth: 200,
theme: ['tooltipster-shadow', 'tooltipster-shadow-customized'],
functionInit: function(instance, helper){
var content = jQuery(helper.origin).find('.tooltip_content').detach();
instance.content(content);
}
});