How to fix the error; ‘Error: Bootstrap tooltips require Tether (http://github.hubspot.com/tether/)’

How to fix the error; ‘Error: Bootstrap tooltips require Tether (http://github.hubspot.com/tether/)’

I’m using Bootstrap V4 and the following error is logged in the console;

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

I have tried to remove the error by installing Tether but it hasn’t worked. I have ‘installed’ Tether by including the following lines of code;

Have I ‘installed’ tether correctly?
Can anyone help me remove this error?
If you wish to view the error on my site, please click here and load your console.

Solutions/Answers:

Solution 1:

For Bootstrap 4 stable:

Since beta Bootstrap 4 doesn’t depend on Tether but Popper.js. All scripts (must be in this order):

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>

See the current documentation for the newest script versions.


Only Bootstrap 4 alpha:

Bootstrap 4 alpha needs Tether, so you need to include tether.min.js before you include bootstrap.min.js, eg.

<script src="https://npmcdn.com/tether@1.2.4/dist/js/tether.min.js"></script>
<script src="https://npmcdn.com/bootstrap@4.0.0-alpha.5/dist/js/bootstrap.min.js"></script>

Solution 2:

If you’re using Webpack:

  1. Set up bootstrap-loader as described in docs;
  2. Install tether.js via npm;
  3. Add tether.js to the webpack ProvidePlugin plugin.
Related:  How to program hex2bin in Javascript?

webpack.config.js:

plugins: [
        <... your plugins here>,
        new webpack.ProvidePlugin({
            $: "jquery",
            jQuery: "jquery",
            "window.jQuery": "jquery",
            "window.Tether": 'tether'
        })
    ]

Source

Solution 3:

If you are using npm and browserify:

// es6 imports
import tether from 'tether';
global.Tether = tether;

// require
global.Tether = require('tether');

Solution 4:

Personally I use small subset of Bootstrap functionality and don’t need to attach Tether.

This should help:

window.Tether = function () {
  throw new Error('Your Bootstrap may actually need Tether.');
};

Solution 5:

If you want to avoid the error message and you are not using Bootstrap tool tips, you can define window.Tether before loading Bootstrap.

<script>
  window.Tether = {};
</script>
<script src="js/bootstrap.min.js"></script>

Solution 6:

You should done my guideline:
1. Add bellow source into Gemfile

source 'https://rails-assets.org' do
  gem 'rails-assets-tether', '>= 1.1.0'
end
  1. Run command:

    bundle install

  2. Add this line after jQuery in application.js.

    //= require jquery
    //= require tether

  3. Restart rails server.