title: Javascript : Tippy.js not working for dynamic content
body: <p>I have the following tippy where on hover an Ajax call goes and fetches the data, Creates the content and shows it on. But it does not work for dynamic content because on page load the </p>
  
  <p><code>&lt;span class="more-tags otherPostTags" data-postId="{{$post-&gt;id}}"&gt;...&lt;/span&gt;</code> </p>
  
  <p>comes static on page, But also it comes dynamic in a tab.</p>
  
  <p><strong>So the below code works for static</strong> </p>
  
  <p><code>&lt;span class="more-tags otherPostTags" data-postId="{{$post-&gt;id}}"&gt;...&lt;/span&gt;</code> </p>
  
  <p><strong>but does not work for dynamic.</strong></p>
  
  <pre><code>&lt;div id="template" style="display: none;"&gt;
      Loading a new image...
  &lt;/div&gt;
  
  &lt;span class="more-tags otherPostTags" data-postId="{{$post-&gt;id}}"&gt;...&lt;/span&gt;
  </code></pre>
  
  <p>Tippy jquery :</p>
  
  <pre><code>const template = document.querySelector('#template');
  const initialText = template.textContent;
  
  const tip = tippy('.otherPostTags', {
      animation: 'shift-toward',
      arrow: true,
      html: '#template',
      onShow() {
          const content = this.querySelector('.tippy-content')
          if (tip.loading || content.innerHTML !== initialText) return
          tip.loading = true
          node = document.querySelectorAll('[data-tippy]');
          let id = node[0].dataset.postid;
          $.ajax({
              url: '/get/post/'+id+'/tags',
              type: 'GET',
              success: function(res){
                  let preparedMarkup = '';
                  res.tags.map(function(item) {
                      preparedMarkup +=
                          '&lt;span class="orange-tag" style="background-color: '+item.color+'"&gt;'+
                              item.name +
                          '&lt;/span&gt;';
                  });
                  content.innerHTML = preparedMarkup;
                  tip.loading = false
              },
              error: function(error) {
                  console.log(error);
                  content.innerHTML = 'Loading failed';
                  tip.loading = false
              },
          });
      },
      onHidden() {
          const content = this.querySelector('.tippy-content');
          content.innerHTML = initialText;
  
      },
      popperOptions: {
          modifiers: {
              preventOverflow: {
                  enabled: false
              },
              hide: {
                  enabled: false
              }
          }
      }
  });
  </code></pre>
  
  <p>What am i missing here ?</p>