Get Tether to Load Before Bootstrap (v4) Using Requirejs in Magento2

Question

To use the tooltip component in Bootstrap 4 you need to include tether.

I have tried to do this using the recommended RequireJs method in Magento2, but am not having much luck.

In my requirejs-config.js I have the following:

var config = {
    paths:  {
        "tether" : "js/bootstrap/tether.min",
        "bootstrap": "js/bootstrap/bootstrap.min"
    },
    "shim": {
        "tether": ["jquery"],
        "bootstrap": ["tether", "jquery"]                
    }
};

So, the idea is that I am using shim to make sure bootstrap has a dependency on tether.

I then use the following to use the tooltips:

define(['jquery','tether','bootstrap','domReady!'], function ($) {
    'use strict';
    $(function() {
        $('[data-toggle="tooltip"]').tooltip()
    });
});

The end result is that I get a JavaScript error:

"Error: Bootstrap tooltips require Tether (http://github.hubspot.com/tether/)"

I have tried many things based on some Google searching and have tried the following combinations:

var config = {
    paths:  {
        "tether" : "js/bootstrap/tether.min",
        "bootstrap": "js/bootstrap/bootstrap.min"
    },
    "shim": {
        "tether": ["jquery"],
        "bootstrap": ["tether", "jquery"]                
    },
    deps: ["js/bootstrap/tether.min"]
};

var config = {
    paths:  {
        "tether" : "js/bootstrap/tether.min",
        "bootstrap": "js/bootstrap/bootstrap.min"
    },
    "shim": {
        "js/bootstrap/tether.min": ["jquery"],
        "js/bootstrap/bootstrap.min": ["js/bootstrap/tether.min", "jquery"]                
    }
};

define(['jquery','bootstrap','domReady!'], function ($) {
    'use strict';
    $(function() {
        $('[data-toggle="tooltip"]').tooltip()
    });
});

Not sure if anyone has come across this, but if anyone knows what I am missing or not adding it would be massively appreciated.

Answer 1

This is quite large to post in comments, i have created one extension where i added some javascript and jquery file like mentioned.

Add your files to requirejs-config.js like

var config = {
    map: {
        '*': {
        "tether" : "js/bootstrap/tether.min",
        "bootstrap": "js/bootstrap/bootstrap.min"
        }
    }
};

Once it is done clear cache and php magento setup:static-content:deploy go to \pub\static\_requirejs\frontend\Magento\luma\en_US\requirejs-config.js check your configuration files, if not find, remove the file and refresh the browser , it will generate automatically. once you find your file paths there. you can write code in phtml

     require(['jquery', 'tether', 'bootstrap'], function($){ 
         //check with alert once if works fine then you can go
        $(function() {
            $('[data-toggle="tooltip"]').tooltip()
        });
 });

Using require() you are saying something like "the function that I pass has the following dependencies, check that these dependencies are loaded before running it".

Hope this helps.

Answer 2

I have now managed to find a work around to this, but I don't think it is the best.

It does however work :-)

In my requirejs-config.js:

var config = {
    paths:  {
        "tether" : "js/bootstrap/tether.min",
        "bootstrap": "js/bootstrap/bootstrap.min"
    },
    "shim": {
        "bootstrap": ["jquery"]                
    }
};

Then in my template file:

require(['tether'], function (Tether) {
    window.Tether = Tether;
});
define(['jquery', 'bootstrap'], function ($) {
    $(function() {
        $('[data-toggle="tooltip"]').tooltip()
    });
});

So the main difference here is using a separate require to load tether globally using window.Tether.

Again I don't think this is the best way to do it and I could use a separate js file to initialise the tether require, so let me know your thoughts if you have any.