No tooltips are shown (since new were added)

[WesleyWas]

Bug description

Since I added more tooltips on my Webflow page today, it seems like none of them are working anymore. I'm using TippyJS to create the tooltips based on their attribute data-tippy-content.

Troubleshooting

The HTML elements seem to have the attribute attached, so the issue is not coming from here.

It also seems when I run the command in the console that it finds the elements:

There is also no console error from Tippy.

Reproduction

You can troubleshot the issue live here: https://flusk-test.webflow.io/pricing

Here's the code before the

tag of my Webflow page:

<script src="https://unpkg.com/@popperjs/core@2"></script>
<script src="https://unpkg.com/tippy.js@6"></script>
<script>
tippy('[data-tippy-content]', {        
 animation: 'fade',    
 duration: 400,      
 arrow: true,          
 delay: [0, 50],      
 arrowType: 'large',  
 theme: 'custom-material', // background-color
 maxWidth: 300,    
 interactive: true,
 trigger: 'hover',  
 hideOnClick: false,
})
</script>

But also tried loading after the DOM:

<script src="https://unpkg.com/@popperjs/core@2"></script>
<script src="https://unpkg.com/tippy.js@6"></script>
<script>
  document.addEventListener('DOMContentLoaded', function() {
    tippy('[data-tippy-content]', {        
      animation: 'fade',    
      duration: 400,      
      arrow: true,          
      delay: [0, 50],      
      arrowType: 'large',  
      theme: 'custom-material', // background-color
      maxWidth: 300,    
      interactive: true,
      trigger: 'hover',  
      hideOnClick: false,
    });
  });
</script>

[tanin47]

I encountered the same issue. The solution is to append to the parent instead with:

<script>tippy('[data-tippy-content]', {appendTo: 'parent'})</script>