title: Create dynamic tooltips with tippy.js
body: <p>I create multiple tooltip contents with <a href="https://atomiks.github.io/tippyjs/" rel="nofollow noreferrer">tippy.js</a> But i can't make dynamic content. It shows only first tooltip template.</p>
  
  <p>Second problem is, when i put <code>style: display:none</code> to tooltip wrapper, tooltip doesn't shows. When i remove <code>style: display:none</code>, tooltips content showing as normal (it must be hidden).</p>
  
  <p>How can i make tooltips with child template?</p>
  
  <p>Also here is codepen example: <a href="https://codepen.io/wpuzman/pen/mQeeRQ" rel="nofollow noreferrer">https://codepen.io/wpuzman/pen/mQeeRQ</a></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$(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)
        });
    });
  });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.wrap {
    margin: 150px;
    position: relative;
  }
  
  .box {
    float: left;
    margin-right: 10px;
    cursor: pointer;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://unpkg.com/tippy.js@3/dist/tippy.all.min.js"&gt;&lt;/script&gt;
  &lt;div class="wrap"&gt;
    &lt;div class="box"&gt;
      &lt;img src="https://picsum.photos/50/50" alt=""&gt;
  
      &lt;div class="tooltip_templates" style="display: none;"&gt;
        &lt;div class="tooltip-content"&gt;
          &lt;img src="https://picsum.photos/150/150" alt=""&gt;
          &lt;h3&gt;Test image 1&lt;/h3&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  
    &lt;div class="box"&gt;
      &lt;img src="https://picsum.photos/50/50" alt=""&gt;
  
      &lt;div class="tooltip_templates" style="display: none;"&gt;
        &lt;div class="tooltip-content"&gt;
          &lt;img src="https://picsum.photos/150/150" alt=""&gt;
          &lt;h3&gt;Test image 2&lt;/h3&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  
    &lt;div class="box"&gt;
      &lt;img src="https://picsum.photos/50/50" alt=""&gt;
  
      &lt;div class="tooltip_templates" style="display: none;"&gt;
        &lt;div class="tooltip-content"&gt;
          &lt;img src="https://picsum.photos/150/150" alt=""&gt;
          &lt;h3&gt;Test image 3&lt;/h3&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  
    &lt;div class="box"&gt;
      &lt;img src="https://picsum.photos/50/50" alt=""&gt;
  
      &lt;div class="tooltip_templates" style="display: none;"&gt;
        &lt;div class="tooltip-content"&gt;
          &lt;img src="https://picsum.photos/150/150" alt=""&gt;
          &lt;h3&gt;Test image 4&lt;/h3&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  
    &lt;div class="box"&gt;
      &lt;img src="https://picsum.photos/50/50" alt=""&gt;
  
      &lt;div class="tooltip_templates" style="display: none;"&gt;
        &lt;div class="tooltip-content"&gt;
          &lt;img src="https://picsum.photos/150/150" alt=""&gt;
          &lt;h3&gt;Test image 5&lt;/h3&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  
    &lt;div class="box"&gt;
      &lt;img src="https://picsum.photos/50/50" alt=""&gt;
  
      &lt;div class="tooltip_templates" style="display: none;"&gt;
        &lt;div class="tooltip-content"&gt;
          &lt;img src="https://picsum.photos/150/150" alt=""&gt;
          &lt;h3&gt;Test image 6&lt;/h3&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>