title: Tippyjs shows content of html tippies for a brief time on page load
body: <p>I am using TippyJS to add some tooltips to my website. They have HTML content which works fine, except on page load you can for a short time see the content before it dissapears. How can I fix that? My site jumps now because some HTML of a tippy is in my menu structure.</p>
  <p>I simply have these files in my footer:</p>
  <pre><code>&lt;!-- Popper JS --&gt;
  &lt;script src=&quot;assets/js/popper.min.js&quot;&gt;&lt;/script&gt;
  &lt;!-- Tippy JS --&gt;
  &lt;script src=&quot;https://unpkg.com/tippy.js@6&quot;&gt;&lt;/script&gt;
  </code></pre>
  <p>Example of a tooltip that I have:</p>
  <pre><code>&lt;span class=&quot;tooltippy_nostyle&quot;&gt;
      &lt;img class=&quot;infosvg&quot; src=&quot;assets/images/custom/icon_info.svg&quot;&gt;
      &lt;div class=&quot;tooltipcontent darktext&quot;&gt;
      Test
      &lt;/div&gt;
  &lt;/span&gt;
  </code></pre>
  <p>And the JS:</p>
  <pre><code>$( &quot;.tooltippy_nostyle&quot; ).each(function( i ) {
      tippy(this, {
          trigger: 'click',
          allowHTML: true,
          animation: 'scale-subtle',
          interactive: true,
          content: function (reference) {
              return reference.querySelector('.tooltipcontent');
          }
      });
  });
  </code></pre>
  <p>It does not matter what the content is, alot of html or simply 1 word. The content is shown first before the TippyJS code removes it and puts it inside the tooltip. What can I do to fix this? I tried moving the files in my footer to my header but this changed nothing.</p>