Jump to content

How to use tippy.js in a module?


bernhard
 Share

Recommended Posts

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.

2DOC5vQ.png

Thank you!

  • Like 1
Link to comment
Share on other sites

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.

  • Like 7
  • Thanks 1
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...