Создавайте динамические всплывающие подсказки с помощью tippy.js

Question

Я создаю несколько всплывающих подсказок с помощью tippy.js Но я не могу создать динамический контент. Показывает только первый шаблон всплывающей подсказки.

Вторая проблема, когда я помещаю style: display:none в оболочку всплывающей подсказки, подсказка не отображается. Когда я удаляю style: display:none, содержание всплывающих подсказок отображается как обычно (оно должно быть скрыто).

Как мне сделать всплывающие подсказки с дочерним шаблоном?

Также вот пример кода ручки: 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') выберет ребенка с этим классом, который будет использоваться в качестве контента.

Вы также можете избежать цикла .each(), используя функцию для content:

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