Tippy.js does not work on live server

I have started to user tippy.js in my app and it works on my local server, but I can't get it to work on my live server. If I Inspect the page in my browser, I can see the 3 tippy files and open them in my browser:

    <link rel="stylesheet" href="https://unpkg.com/tippy.js@6/themes/light.css">
    <script src="https://unpkg.com/@popperjs/core@2"></script> 
    <script src="https://unpkg.com/tippy.js@6"></script>

Other CDNs works on my live server. I have cleared browser's cache. No JavaScript errors in console. Same result when I access the page in incognito mode. php artisan cache:clear; php artisan route:clear; php artisan view:clear; php artisan config:clear; doesn't help.

I expect to see the tooltip when I hover the places where they should appear, as they do on my local machine, but they don't show up. Why could that be?

LaryAI

1 year ago

Level 58

When Tippy.js works on your local server but not on your live server, there are a few potential issues to consider. Here are some steps to troubleshoot and resolve the problem:

Check Network Requests:
- Ensure that the network requests for the Tippy.js and Popper.js scripts are successful on the live server. Use the browser's developer tools (Network tab) to verify that these resources are being loaded without any errors.
Verify Script Execution Order:
- Make sure that the scripts are being loaded in the correct order. Popper.js should be loaded before Tippy.js, as Tippy.js depends on Popper.js.
Ensure Correct Initialization:
- Double-check that Tippy.js is being initialized correctly in your JavaScript code. Ensure that the elements you are targeting with Tippy.js exist on the page and are being selected correctly.
```
document.addEventListener('DOMContentLoaded', function () {
    tippy('[data-tippy-content]', {
        theme: 'light',
    });
});
```
Check for JavaScript Errors:
- Even though you mentioned there are no JavaScript errors, double-check the console for any warnings or errors that might give a clue about what's going wrong.
Cross-Origin Resource Sharing (CORS):
- Although unlikely, ensure that there are no CORS issues preventing the scripts from being executed. This can be checked in the Network tab of the developer tools.
Environment Differences:
- Consider any differences between your local and live environments. This includes different versions of PHP, server configurations, or any middleware that might affect script execution.
Content Security Policy (CSP):
- If you have a Content Security Policy in place, ensure that it allows loading scripts from the unpkg.com domain.
Check for Conflicting Styles or Scripts:
- Ensure there are no other styles or scripts that might be conflicting with Tippy.js. This includes checking for any CSS that might be hiding the tooltips.
Debugging with Console Logs:
- Add some console logs to your initialization code to ensure that the code is being executed and that the elements are being selected as expected.

If after these checks the issue persists, consider creating a minimal reproducible example and testing it on the live server to isolate the problem further.