Innovative Solution for UMD/AMD Integration
If you are utilizing UMD and compiling with require.js, a simple yet effective solution is available to streamline the process.
In the module that necessitates tether as a dependency, loading Tooltip as UMD, simply insert a brief snippet before the module definition for Tether:
// Load the UMD module dependency first and attach it to the global scope
require(['tether'], function(Tether) {
// @todo: Implement a proper fix when bootstrap updates UMD loading method instead of relying on globals
window.Tether = Tether; // Attach to global scope
});
// Followed by your regular module definition
define([
'jquery',
'tooltip',
'popover'
], function($, Tooltip, Popover){
"use strict";
//...
/*
By this point, the global variable window.Tether will be defined,
and the UMD module Tooltip will not throw any exceptions
*/
//...
});
This snippet can be placed at any higher level within your application, as long as it's executed before using bootstrap components with the Tether dependency.
// ===== file: tetherWrapper.js =====
require(['./tether'], function(Tether) {
window.Tether = Tether; // Attach to global scope
// Crucial to maintain the original module definition approach
return Tether;
});
// ===== Your main configuration file and dependencies definition =====
paths: {
jquery: '/vendor/jquery',
// tether: '/vendor/tether'
tether: '/vendor/tetherWrapper' // @todo Replace original Tether with our wrapper around it
// ...
},
shim: {
'bootstrap': ['tether', 'jquery']
}
UPDATE: In Bootstrap 4.1 Stable, they have swapped out Tether in favor of Popper.js. Refer to the documentation on usage for more details.