Loop中的Tooltipster

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>

注意：建议不要使用班级＆＃39;工具提示＆＃39;因为它可能与Bootstrap或其他风格冲突，但我把它留下了它。

另外，请确保您的CSS包含：

.tooltip_templates { display: none; }

最后，你的jQuery应该包括：

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

应该这样做。如果您有任何问题，请告诉我们！

Answer 2

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