Tooltipster in Loop

Question

Я пытаюсь использовать Tooltipster, чтобы показать изображение парящих миниатюр, которые находятся в цикле. Я пробовал несколько способов найти ближайший класс tooltip_templates и показать его, но у меня нет успеха. Есть ли другой способ?

<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

Согласно the docs (5. Использования HTML внутри ваших подсказок)
Это должно работать:

<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> 

Примечания: Не рекомендуется использовать класс 'подсказку', поскольку это может привести к конфликту с Bootstrap или другими стилями, но я оставил его, как и у вас.

Кроме того, убедитесь, что ваш CSS включает в себя:

.tooltip_templates { display: none; } 

Наконец, ваш Jquery должен включать в себя:

$(document).ready(function() { 
    $('.tooltip').tooltipster(); 
}); 

Это должно сделать это. Дайте знать, если у вас появятся вопросы!

Answer 2

Thanks Jay. Я также получил это, чтобы работать пару дней назад. Вот как я это сделал.

<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); 
} 
});