Meteor smart package jquery UI and bootstrap tooltips are interfering

Question

I have both jquery UI and bootstrap installed as smart packages in my Meteor project.

Jquery UI and bootstraps tooltips interfere with each other. Searching google I found a fix:

jQueryUI Tooltips are competing with Twitter Bootstrap

Which is to run some code after jquery UI has loaded and before bootstrap has loaded.

How can this be done with Meteor though?

Answer 1

The idea of this solution/hack is that you add dependencies to packages. So they will load in proper order:

jqueryui -> jQueryUIBootstrapFix -> myBootstrap

Here is instruction how you can do it:

Create local package jQueryUIBootstrapFix and myBootstrap. You can do that using em and typing in console :

em g:package jQueryUIBootstrapFix
em g:package myBootstrap

Open packages/jQueryUIBootstrapFix and make sure packages.js look like this:

Package.describe({
  name: 'jQueryUIBootstrapFix',
});

Package.on_use(function (api) {
  api.use('jqueryui', 'client');
  api.add_files('jQueryUIBootstrapFix.js', ['client']);
});

Then open packages/myBootstrap and copy all files from packages/boostrap-3 (overwrite). Remove smart.json from this dir. Open packages/myBootstrap/package.json and change

Package.describe({
  summary: "Provides bootstrap 3."
});

to

Package.describe({
  name:'jQueryUIBootstrapFix',
  summary: "Provides bootstrap 3."
});

In the same file add line:

Package.on_use(function (api) {
  api.use('jquery');
  api.use('myBootstrap');
  ...
})

In the end add to end of the file .meteor/release your local packages:

jQueryUIBootstrapFix
myBootstrap