ツールチップのループ内

Question

私は、ツールチップを使用して、ループ内にあるホバリングサムネイルの画像を表示しようとしています。私は最も近い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> 

注：それは競合する可能性として、クラスのツールチップ」を使用することは推奨されませんブートストラップや他のスタイルでは、私はあなたがそれを残しました。

はまた、あなたのCSSが含まれていることを確認します

.tooltip_templates { display: none; } 

最後に、あなたのjQueryの含まれている必要があります

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

それを行う必要があること。ご質問がある場合はお知らせください。

Answer 2

ありがとうございます。私は数日前にこれを稼働させました。これが私のやり方です。

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