1

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.

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.

|improve this answer|||||
  • I tried that, but unfortunately I had the same issue. Your method loaded the tether and bootstrap libraries, but bootstrap still complained about tether not being present. – Adam Stacey Jun 2 '16 at 22:11
  • Let me try this scenario. – Krishna ijjada Jun 3 '16 at 0:56
1

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.

|improve this answer|||||

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.