使用 tippy.js 創建動態工具提示

Question

我用tippy.js創建了多個工具提示內容但是我不能制作動態內容。 它只顯示第一個工具提示模板。

第二個問題是，當我將style: display:none放入工具提示包裝器時，工具提示不顯示。 當我刪除style: display:none ，工具提示內容顯示為正常（必須隱藏）。

如何使用子模板制作工具提示？

這里還有 codepen 示例： https ://codepen.io/wpuzman/pen/mQeeRQ

 $(document).ready(function() { $('.box').each(function(){ tippy(this, { arrow: true, arrowType: 'round', size: 'large', duration: 500, animation: 'scale', placement: 'left', interactive: true, theme: 'google', content: document.querySelector('.tooltip_templates').cloneNode(true) }); }); });

 .wrap { margin: 150px; position: relative; } .box { float: left; margin-right: 10px; cursor: pointer; }

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://unpkg.com/tippy.js@3/dist/tippy.all.min.js"></script> <div class="wrap"> <div class="box"> <img src="https://picsum.photos/50/50" alt=""> <div class="tooltip_templates" style="display: none;"> <div class="tooltip-content"> <img src="https://picsum.photos/150/150" alt=""> <h3>Test image 1</h3> </div> </div> </div> <div class="box"> <img src="https://picsum.photos/50/50" alt=""> <div class="tooltip_templates" style="display: none;"> <div class="tooltip-content"> <img src="https://picsum.photos/150/150" alt=""> <h3>Test image 2</h3> </div> </div> </div> <div class="box"> <img src="https://picsum.photos/50/50" alt=""> <div class="tooltip_templates" style="display: none;"> <div class="tooltip-content"> <img src="https://picsum.photos/150/150" alt=""> <h3>Test image 3</h3> </div> </div> </div> <div class="box"> <img src="https://picsum.photos/50/50" alt=""> <div class="tooltip_templates" style="display: none;"> <div class="tooltip-content"> <img src="https://picsum.photos/150/150" alt=""> <h3>Test image 4</h3> </div> </div> </div> <div class="box"> <img src="https://picsum.photos/50/50" alt=""> <div class="tooltip_templates" style="display: none;"> <div class="tooltip-content"> <img src="https://picsum.photos/150/150" alt=""> <h3>Test image 5</h3> </div> </div> </div> <div class="box"> <img src="https://picsum.photos/50/50" alt=""> <div class="tooltip_templates" style="display: none;"> <div class="tooltip-content"> <img src="https://picsum.photos/150/150" alt=""> <h3>Test image 6</h3> </div> </div> </div> </div>

Answer 1

使用當前元素選擇其模板：

$(document).ready(function() {
  $('.box').each(function(){
      tippy(this, {
          arrow: true,
          arrowType: 'round',
          size: 'large',
          duration: 500,
          animation: 'scale',
          placement: 'left',
          interactive: true,
          theme: 'google',
          content: this.querySelector('.tooltip_templates')
      });
  });
});

this.querySelector('.tooltip_templates')將選擇具有該類的子項，該子項將用作內容。

您還可以通過對content使用函數來避免.each()循環：

tippy('.box', {
    animateFill: false,
    arrow: true,
    arrowType: 'round',
    size: 'large',
    duration: 500,
    animation: 'scale',
    placement: 'left',
    interactive: true,
    theme: 'google',
    content: function (reference) {
        return reference.querySelector('.tooltip_templates');
    }
});