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

Question

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;

<link rel="stylesheet" href="http://www.atlasestateagents.co.uk/css/tether.min.css">
<script src="http://www.atlasestateagents.co.uk/javascript/tether.min.js"></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.

Hi, can you post the code you use? would be better if you could put the code in jsfiddle or somewhere else. – kucing_terbang Jan 2 '16 at 17:33 — kucing_terbang, Jan 2 '16 at 17:33
There's no real code to post but if you visit www.atlasestateagents.co.uk and view the console you will see the javascript error? – Michael LB Jan 3 '16 at 16:03 — Michael LB, Jan 3 '16 at 16:03
I used these exact lines of code and they removed the error for me in V3, for anyone wondering about that version. – William Jan 3 '16 at 19:38 — William, Jan 3 '16 at 19:38
@MichaelLB, instead of link to your website, I'd recommend to put some code-snippets here, within the question itself, is your website will be updated, and it will lose the actuality. – Farside Mar 21 '16 at 18:38 — Farside, Mar 21 '16 at 18:38

adilapapaya · Accepted Answer · 2016-12-06 19:53:23Z

up vote155down voteaccepted

Bootstrap 4 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>

edited Dec 6 '16 at 19:53

answered Jan 3 '16 at 20:38

adilapapaya

3,08821319

1

Fixed, thank you! However, fixing that lead to a new warning, maybe for a new question?

mutating the [[Prototype]] of an object will cause your code to run very slowly; instead create the object with the correct initial [[Prototype]] value using Object.create'

– Michael LBJan 3 '16 at 20:55

Great! I think the error you're getting is coming from the bootstrap.min.js library. Does it still show up if you comment it out. Yeah, I'd post a new question if Google doesn't have a solution. :) – adilapapaya Jan 3 '16 at 21:17

Consider using npmcdn to link to packages published on npm, as some folks tend to remove the build/dist files from github. https://npmcdn.com/tether@1.2.4/dist/ and https://npmcdn.com/bootstrap@4.0.0-alpha.2/dist/ – eddywashere Apr 24 '16 at 19:14

2

but its strange , v4-alpha.getbootstrap.com doesn't says anything about it – Семенихин Максим Jul 16 '16 at 9:04

It does on version aplha.3. Just had this error. I believe tether is now downloaded as a package and not included anymore. So you'll have to include this script aswell. – Tim Vermaelen Aug 29 '16 at 15:53

add a comment

Jannic Beck · Answer 2 · 2016-06-07 14:20:55Z

If you are using npm and browserify:

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

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

Snowman · Answer 3 · 2016-06-08 14:49:05Z

If you're using Webpack:

Set up bootstrap-loader as described in docs;
Install tether.js via npm;
Add tether.js to the webpack ProvidePlugin plugin.

webpack.config.js:

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

Source

Is this all you need. I'm doing this and its not working. – Henry Jan 16 at 21:42 — Henry, Jan 16 at 21:42
As I mentioned on the Github issue, newer versions of Bootstrap (e.g. 4.0.0-alpha.6) are now looking for "Tether" instead of "window.Tether". – ThePadawan Jan 24 at 16:35 — ThePadawan, Jan 24 at 16:35

Cezary Daniel Nowak · Answer 4 · 2016-04-07 19:24:42Z

up vote10down vote

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.');
};

answered Apr 7 '16 at 19:24

Cezary Daniel Nowak

716617

1

so what do you propose, to cut these lines? not good, as you shouldn't modify vendors and third party libs, it will prevent you doing updates later. If you don't use these Bootstrap components as you say - why would you need Tether... so I'm not really understanding the value of your input. – Farside Apr 8 '16 at 11:07

1

Tether warning is show even, if you don't use bootstrap functionality that requires Tether. My solution hides annoying message in the console. – Cezary Daniel Nowak Apr 8 '16 at 16:09

2

And this change is not updating 3rdparty or vendor scripts. You can add it above <script src="bootstrap.js"> – Cezary Daniel Nowak Apr 8 '16 at 16:10

I don't really understand you, why not just one-liner then, alike window.Tether = window.Tether || {};? Plus, there's caveat in your solution, that it can wipe already defined dependency in a global scope, if the module will be loaded before your thing is executed. – Farside Apr 8 '16 at 22:49

5

This is hack for a alpha version of Bootstrap. I don't see reason to be picky :-) If developer don't want to use Tether, wiping already defined dependency is not a case. And in my opinion window.Tether = window.Tether || {}; is worse because it will throw Tether is not a function, instead of meaningful error. – Cezary Daniel Nowak Apr 11 '16 at 11:45

show 1 more comment

cjfarrelly · Answer 5 · 2016-02-03 17:54:23Z

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/bootstrap@4.0.0-alpha.2/js/bootstrap.js"></script>

or bower like this bower install tether --save-dev – Farside Mar 21 '16 at 18:21 — Farside, Mar 21 '16 at 18:21
Shouldn't it be npm install tether --save instead of --save-dev? It will be needed also in production. – siannone Jun 19 '16 at 14:27 — siannone, Jun 19 '16 at 14:27

Quy Le · Answer 6 · 2016-11-19 16:57:53Z

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

Run command:

bundle install
Add this line after jQuery in application.js.

//= require jquery
//= require tether
Restart rails server.

Spirit · Answer 7 · 2016-02-01 21:49:02Z

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 (http://github.hubspot.com/tether)')
}

So the error message contains the required information.

You can download the archive from that link.

Uncompressed version:

https://rawgit.com/HubSpot/tether/master/src/js/tether.js https://rawgit.com/HubSpot/tether/master/dist/css/tether.css

Henry · Answer 8 · 2017-01-16 22:18:58Z

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 - http://tether.io/
   */
  if (typeof Tether === 'undefined') {
    throw new Error('Bootstrap tooltips require Tether (http://tether.io/)');
  }

Thanks that worked, I would suggest that you edit your answer to remove the unused line tether: 'tether', – ghiscoding Jan 28 at 22:26 — ghiscoding, Jan 28 at 22:26
You are right, but as an example I think it illustrates the fact that exact naming is required. – Henry Jan 30 at 3:11 — Henry, Jan 30 at 3:11

Throttlehead · Answer 9 · 2016-07-28 04:26:34Z

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

<script>
  window.Tether = {};
</script>

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;
});

require([
  "app",
], function(App){
  App.initialize();
});

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

Vladimir · Answer 10 · 2017-03-11 12:28:38Z

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)
            ...
        ]
};

Enough only three: ...new webpack.ProvidePlugin({ $: 'jquery', jQuery: 'jquery', Tether: 'tether' }), ... – MentorMar 15 at 10:07 — Mentor, Mar 15 at 10:07

Donald Rich · Answer 11 · 2017-04-30 12:04:13Z

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>

opmind · Answer 12 · 2017-06-20 06:01:03Z

for webpack I resolved this with (webpack.config.js):

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

Djalas · Answer 13 · 2017-03-27 23:13:33Z

For webpack 1 or 2 with Bootstrap 4 you need

new webpack.ProvidePlugin({
   $: 'jquery',
   jQuery: 'jquery',
   Tether: 'tether'
})

Ege Ersoz · Answer 14 · 2017-05-03 00:33:33Z

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'
    }
}

Farside · Answer 15 · 2016-03-22 12:32:42Z

UMD/AMD solution

For those guys, who are doing it through UMD, and compiles, for example via require.js, I found 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
define([
    'jquery',
    'tooltip',
    'popover'
], 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 Tetherdependency.

// ===== 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']       
}

Attaching of global scope, could be easily removed by search of @todo, when Boostrap's Developers will fix their thing in next releases.

wuher · Answer 16 · 2016-05-02 03:04:15Z

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)
app.import('bower_components/tether/dist/js/tether.min.js');

// bootstrap
app.import('bower_components/bootstrap/scss/bootstrap-flex.scss');
app.import('bower_components/bootstrap/dist/js/bootstrap.js');

sat · Answer 17 · 2016-07-30 21:57:57Z

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"
}

Ruben Cruz · Answer 18 · 2017-04-03 01:36:10Z

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

Hamid · Answer 19 · 2017-06-07 19:02:57Z

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

<script src="https://npmcdn.com/tether@1.2.4/dist/js/tether.min.js"></script>

Lukas Pierce · Answer 20 · 2017-07-04 10:20:50Z

If you use require.js AMD loader:

// path config
requirejs.config({
  paths: {
    jquery: '//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/core.js',
    tether: '//cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min',
    bootstrap: '//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/js/bootstrap.min',
  },
  shim: {
    bootstrap: {
      deps: ['jquery']
    }
  }
});

//async loading
requirejs(['tether'], function (Tether) {
  window.Tether = Tether;
  requirejs(['bootstrap']);
});

CodeBiker · Answer 21 · 2017-07-23 06:15:29Z

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="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" 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="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>

Jakamollo · Answer 22 · 2017-02-01 08:46:00Z

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.

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

22 Answers

UMD/AMD solution