Tippy Suddenly Not Working - Custom Code

Design help Custom code
1

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.

Screenshot 2024-01-25 at 6 38 47 in the evening

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

Screenshot 2024-01-25 at 6 39 03 in the evening

There is also no console error from Tippy.

Reproduction

You can troubleshot the issue live here: Pricing & Plans - Flusk

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>
2

Hey!

We recently made an attribute-based solution for adding Tippy.js tooltips to your Webflow site, it’s got a bunch of attributes/configuration options, and should be working perfectly well!

Here’s a link to the video + code :) #110 - Tooltips for Webflow | Webflow Powerups