How to use tippy.js in a module?

[bernhard]

Hi JavaScript experts!

I wanted to use tippy.js ( https://github.com/atomiks/tippyjs ) for RockGrid but I don't know how to load the necessary files. I got it to work with the default theme by injecting the CDN files, but I need to add the light-border theme and that's not part of the CDN files from the docs. Can anybody please help me - I don't know how all this NPM YARN stuff works and how to get the right files in the right place and which files to add to my $config->scripts and $config->styles in the admin.

Thank you!

[MoritzLost]

Maybe I don't understand your problem correctly, but if you don't want to use a package manager, can't you just inject the css file for the theme directly as well? There's a CDN link on the themes page: https://unpkg.com/tippy.js@4/themes/light-border.css

If you want to bundle all those files into a single dependency, I recommend Parcel, it's much simpler than webpack and you basically need no configuration for a basic compilation of JS/CSS dependencies into bundle files. I have just tried it out for a project I'm working on; this NPM script is all the config I needed:

parcel build js/main.js --target browser --out-dir public/site/js --out-file bundle

This will parse all code/imports in the main.js file and bundle them into a bundle.js file. It will also create a bundle.css file if you import any css.