Tooltip Tether with requireJS

Question

latest beta version (v4) of Bootstrap uses Tether js to position elements, I am unable to let it work in my Requirejs app.

in my requirejs config I have the following shim's

paths: {
    jquery: '/path/to/jquery',
    tether: '/path/to/tether'
},
shim: { 
     'bootstrap': ['tether', 'jquery']       
}

And when I want to activate tooltips in my app, I use the following code which I think is correct

function page_events() {
    requirejs(['bootstrap'], function(bootstrap) {
        $('[data-toggle="tooltip"]').tooltip(); 
    }); 
}

This should load bootstraps dependencies first and afterwards execute the code. So normally Tether should be included before this piece of code.

But the console result is

Uncaught ReferenceError: Tether is not defined

Does anyone have the same issue?

Underwent

Possible duplicate of How to fix the error; 'Error: Bootstrap tooltips require Tether (http://github.hubspot.com/tether/)' – Codify

Answer 1

Create a script like this:

define(['lib/tether.min'], function(tether) {
    window.Tether = tether;
    return tether;
});

Then change this:

paths: {
    jquery: '/path/to/jquery',
    // tether: '/path/to/tether'
    tether: '/path/to/your-own-tether'
},
shim: { 
     'bootstrap': ['tether', 'jquery']       
}

Why? because the browser need this:

window.Tether = tether; // May be both requirejs and tether didn't do this

Homemaking

is return tether; really needed here? – Codify

No, window.Tether make Tether available globally. If you don't return anything, when you require tether, the tether argument will be undefined. So, it's just for consistency. – Homemaking

Answer 2

if you want Tether to be available globally you should include it manually with a script tag. RequireJS doesn't expose it.

<script type="text/javascript" src="/js/tether.js"></script>
<script type="text/javascript" src="/js/optimized.min.js"></script>

Giffin

it's not exactly what @Underwent is asking, as it's clearly visible from the question, that he's using requireJS and you proposing to load the script not as module dependency, which breaks the whole concept. You may take a look the solution for UMD/AMD here. – Codify