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?

Possible duplicate of [How to fix the error; 'Error: Bootstrap tooltips require Tether (http://github.hubspot.com/tether/)'](http://stackoverflow.com/questions/34567939/how-to-fix-the-error-error-bootstrap-tooltips-require-tether-http-github-h) — Farside, Mar 21 '16 at 18:28

score 7 · Answer 1 · answered Jan 08 '16 at 17:01

7

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

answered Jan 08 '16 at 17:01

Mas Bagol

4,377
10
44
72

is `return tether;` really needed here? – Farside Mar 21 '16 at 18:27
1

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. – Mas Bagol Mar 22 '16 at 09:48

AlexCrow · Answer 2 · 2015-12-29T21:57:24.470

0

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>

edited Dec 29 '15 at 21:57

answered Dec 29 '15 at 18:48

AlexCrow

49
5

it's not exactly what @webmaster 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](http://stackoverflow.com/a/36138671/4354249). – Farside Mar 23 '16 at 10:43

Tooltip Tether with requireJS

2 Answers2

Linked