How to load Bootstrap scripts in an environment that may have them already?

Question

I would like to use the popover (and its dependency on the tooltip) script from Bootstrap in my WordPress plugin.

The plugin will probably appear in environments that already have Bootstrap, and I'm trying to determine how to implement this in a reliable way.

• I could try to check plugin definitions and dynamically load scripts if they are not present (otherwise use which environment). However, timing seems complicated because one of the scripts depends on the other and the presence of plugins with the same name does not guarantee version compatibility or even Bootstrap script.

• The scripts seem to include the noConflict() functionality, which I could try to use to hide my own copies and in any case ignore the presence of global ones. However, again I am not sure how to get the mechanics of this right, since a popover needs a tooltip to work. In addition, after viewing the Bootstrap tracker, later it seems that noConflict() in tooltips is currently broken and will only be fixed in version 3. noConflict()

• It seems like an extra bootloader (like yepnope) can handle this for me, but it seems to me that it sinks deeper into the hole.

Which of these (or similar) methods would be practical to implement?

Answer 1

Use RequireJS to load into your own scripts and wrap them with closure.

 // let say tooltip was defined already $.fn.tooltip = function(data){ $(this).mouseover(function(){ console.log(data.title); }); }; // we'll apply the old tooltip to .tooltip1 $('.tooltip1').tooltip({ title: 'tada', placement: 'bottom' }); // what version of jquery did we have out here console.log($.fn.jquery); require({ "paths": { "jquery": "//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min", "bootstrap": "//twitter.imtqy.com/bootstrap/assets/js/bootstrap.min" }, shim: { "bootstrap": { deps: ['jquery'], exports: '$.fn.tooltip' } } }, ['jquery', 'bootstrap'], function($){ // what version of jquery do we have in here console.log($.fn.jquery); // now we apply the bootstrap tooltip to .tooltip2 $('.tooltip2').tooltip({ title: 'tada', placement: 'bottom' }); }); 

http://jsfiddle.net/moderndegree/prSUF/