[Solved] How to fix the error; ‘Error: Bootstrap tooltips require Tether (’

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

Error: Bootstrap tooltips require 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;

<link rel="stylesheet" href="">
<script src=""></script>

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.

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=""></script>
<script src=""></script>
<script src=""></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="[email protected]/dist/js/tether.min.js"></script>
<script src="[email protected]/dist/js/bootstrap.min.js"></script>
Respondent: adilapapaya

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.


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


Respondent: Snowman

Solution #3:

If you are using npm and browserify:

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

// require
global.Tether = require('tether');
Respondent: Jannic Beck

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.

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

Solution #6:

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

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

    bundle install

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

    //= require jquery
    //= require tether

  3. Restart rails server.

Respondent: Quy Le

Solution #7:

Install tether via npm like below

npm install tether --save-dev

then add tether to your html above bootstrap like below

<script src="node_modules/tether/dist/js/tether.min.js"></script>
<script src="jspm_packages/github/twbs/[email protected]/js/bootstrap.js"></script>
Respondent: cjfarrelly

Solution #8:

For webpack I resolved this with webpack.config.js:

new webpack.ProvidePlugin({
  $: 'jquery',
  jQuery: 'jquery',
  "window.jQuery": "jquery",
  Tether: 'tether'
Respondent: opmind

Solution #9:

An additional note. If you check uncompressed javascript file, you will find the condition:

if(window.Tether === undefined) {
     throw new Error('Bootstrap tooltips require Tether (')

So the error message contains the required information.

You can download the archive from that link.

Uncompressed version:

Respondent: Anton Lyhin

Solution #10:

Using webpack I used this in webpack.config.js:

var plugins = [


    new webpack.ProvidePlugin({
        $: "jquery",
        jQuery: "jquery",
        'window.jQuery': 'jquery',
        'window.Tether': 'tether',
        tether: 'tether',
        Tether: 'tether'

It seems like Tether was the one it was looking for:

var Tooltip = function ($) {

   * Check for Tether dependency
   * Tether -
  if (typeof Tether === 'undefined') {
    throw new Error('Bootstrap tooltips require Tether (');
Respondent: Henry

Solution #11:

I was having this issue with requirejs using the newest boostrap 4 build. I ended up just defining:

  window.Tether = {};

in my html head tag to fool bootstrap’s check. I then added a second require statement just before the require that loads my app, and subsequently, my bootstrap dependency:

require(['tether'], function (Tether) {
  window.Tether = Tether;

], function(App){

Using both of these in tandem and you should have no problem using current bootstrap 4 alpha build.

Respondent: Throttlehead

Solution #12:

Works for generator-aspnetcore-spa and bootstrap 4.

// ===== file: webpack.config.vendor.js =====    
module.exports = (env) => {
    plugins: [
        new webpack.ProvidePlugin({ $: 'jquery', 
                                    jQuery: 'jquery',
                                    'window.jQuery': 'jquery',
                                    'window.Tether': 'tether',
                                    tether: 'tether', 
                                    Tether: 'tether' }), 
// Maps these identifiers to the jQuery package 
// (because Bootstrap expects it to be a global variable)
Respondent: Vladimir

Solution #13:

For webpack 1 or 2 with Bootstrap 4 you need

new webpack.ProvidePlugin({
   $: 'jquery',
   jQuery: 'jquery',
   Tether: 'tether'
Respondent: Djalas

Solution #14:

If you are using Brunch, you can add this at the end of your brunch-config.js:

npm: {
    enabled: true,
    globals: {
        $: 'jquery', jQuery: 'jquery', 'Tether': 'tether'
Respondent: Ege Ersoz

Solution #15:

If you use require.js AMD loader:

// path config
  paths: {
    jquery: '//',
    tether: '//',
    bootstrap: '//',
  shim: {
    bootstrap: {
      deps: ['jquery']

//async loading
requirejs(['tether'], function (Tether) {
  window.Tether = Tether;
Respondent: Lukas Pierce

Solution #16:

For you Laravel Mix users out there running Bootstrap4, you will need to run

npm installer tether --save

Then update you resources/assets/js/bootstrap.js to load Tether and bring it to the window object.

Here is what mine looks like: (Note I also had to run npm install popper.js --save)

window.$ = window.jQuery = require('jquery');
window.Popper = require('popper.js').default;
window.Tether = require('tether');
Respondent: zeros-and-ones

Solution #17:

To add to @adilapapaya’s answer. For ember-cli users specifically, install tether with

bower install --save tether

and then include it in your ember-cli-build.js file before bootstrap, like so:

// tether (bootstrap 4 requirement)

// bootstrap
Respondent: wuher

Solution #18:

And if using webpack, you will need the expose plugin. In your webpack.config.js, add this loader

   test: require.resolve("tether"),
   loader: "expose?$!expose?Tether"
Respondent: sat

Solution #19:

I had the same problem and this is how I solved it.
I’m on rails 5.1.0rc1

Make sure to add require jquery and tether inside your application.js file they must be at the very top like this

//= require jquery
//= require tether

Just make sure to have tether installed

Respondent: Ruben Cruz

Solution #20:

Method #1: Download from Here and insert it to your projects, or
Method #2: use below code before your bootstrap script source:

<script src="[email protected]/dist/js/tether.min.js"></script>
Respondent: Hamid

Solution #21:

I recommend following the instructions in the Bootstrap 4 documentation:

Copy-paste the stylesheet <link> into your <head> before all other
stylesheets to load our CSS.

<link rel="stylesheet" href="" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">

Add our JavaScript plugins, jQuery, and Tether near the end of your
pages, right before the closing tag. Be sure to place jQuery
and Tether first, as our code depends on them. While we use jQuery’s
slim build in our docs, the full version is also supported.

<script src="" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>
<script src="" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
<script src="" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>
Respondent: CodeBiker

Solution #22:

UMD/AMD solution

For those guys, who are doing it through UMD, and compile via require.js, there is a laconic solution.

In the module, which requires tether as the dependency, which loads Tooltip as UMD, in front of module definition, just put short snippet on definition of Tether:

// First load the UMD module dependency and attach to global scope
require(['tether'], function(Tether) {
    // @todo: make it properly when boostrap will fix loading of UMD, instead of using globals
    window.Tether = Tether; // attach to global scope

// then goes your regular module definition
], function($, Tooltip, Popover){
    "use strict";
        by this time, you'll have window.Tether global variable defined,
        and UMD module Tooltip will not throw the exception

This short snippet at the very beginning, actually may be put on any higher level of your application, the most important thing – to invoke it before actual usage of bootstrap components with Tether dependency.

// ===== file: tetherWrapper.js =====
require(['./tether'], function(Tether) {
    window.Tether = Tether; // attach to global scope
    // it's important to have this, to keep original module definition approach
    return Tether;

// ===== your MAIN configuration file, and dependencies definition =====
paths: {
    jquery: '/vendor/jquery',
    // tether: '/vendor/tether'
    tether: '/vendor/tetherWrapper'  // @todo original Tether is replaced with our wrapper around original
    // ...
shim: { 
     'bootstrap': ['tether', 'jquery']       

UPD: In Boostrap 4.1 Stable they replaced Tether, with Popper.js, see the documentation on usage.

Respondent: Farside

Solution #23:

I had the same problem and i solved it by including jquery-3.1.1.min before including any js and it worked like a charm. Hope it helps.

Respondent: Jakamollo

The answers/resolutions are collected from stackoverflow, are licensed under cc by-sa 2.5 , cc by-sa 3.0 and cc by-sa 4.0 .

Most Popular

To Top
India and Pakistan’s steroid-soaked rhetoric over Kashmir will come back to haunt them both clenbuterol australia bossier man pleads guilty for leadership role in anabolic steriod distribution conspiracy