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

23

185

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.

Hogwash answered 2/1, 2016 at 16:18 Comment(5)
Hi, can you post the code you use? would be better if you could put the code in jsfiddle or somewhere else.Braden
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?Hogwash
I used these exact lines of code and they removed the error for me in V3, for anyone wondering about that version.Drub
@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.Mok
Solution #47432112Nisi
Q
245

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/[email protected]/dist/js/tether.min.js"></script>
<script src="https://npmcdn.com/[email protected]/dist/js/bootstrap.min.js"></script>
Quadrifid answered 3/1, 2016 at 20:38 Comment(6)
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'Hogwash
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. :)Quadrifid
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/[email protected]/dist/ and https://npmcdn.com/[email protected]/dist/Seaplane
but its strange , v4-alpha.getbootstrap.com doesn't says anything about itHeist
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.Allot
Why not just bundle it with the download? Would that make too much sense?Unprincipled
H
20

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.

webpack.config.js:

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

Source

Heterochromous answered 8/6, 2016 at 14:49 Comment(2)
Is this all you need. I'm doing this and its not working.Operose
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".Ultramundane
F
18

If you are using npm and browserify:

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

// require
global.Tether = require('tether');
Footsore answered 7/6, 2016 at 14:20 Comment(0)
S
14

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.');
};
Siglos answered 7/4, 2016 at 19:24 Comment(5)
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.Mok
Tether warning is show even, if you don't use bootstrap functionality that requires Tether. My solution hides annoying message in the console.Siglos
And this change is not updating 3rdparty or vendor scripts. You can add it above <script src="bootstrap.js">Siglos
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.Mok
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.Siglos
H
12

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>
Harkness answered 30/4, 2017 at 12:4 Comment(2)
This worked well for me... in my case I am using angular with bootstrap. Thanks!Zeculon
Worked, I added same in my file, it's working fine now. Thanks for this Idea. window.Tether = {}; define(['tether'], function (Tether) { return window.Tether = Tether; });Yager
K
8

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.

Kilan answered 19/11, 2016 at 16:57 Comment(0)
A
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>
Aube answered 3/2, 2016 at 17:54 Comment(2)
or bower like this bower install tether --save-devMok
Shouldn't it be npm install tether --save instead of --save-dev? It will be needed also in production.Originally
O
7

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

new webpack.ProvidePlugin({
  $: 'jquery',
  jQuery: 'jquery',
  "window.jQuery": "jquery",
  Tether: 'tether'
})
Ocana answered 19/6, 2017 at 20:19 Comment(0)
M
5

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

Minuscule answered 31/1, 2016 at 19:42 Comment(0)
O
3

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/)');
  }
Operose answered 16/1, 2017 at 22:18 Comment(3)
Thanks that worked, I would suggest that you edit your answer to remove the unused line tether: 'tether',Catawba
You are right, but as an example I think it illustrates the fact that exact naming is required.Operose
Imagine the confused face of the developer when opening tether.to, trying to find there a solution for this issue. :D I fixed it by adding <script src="https://npmcdn.com/[email protected]/dist/js/tether.min.js"></script>.Magnetic
S
2

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.

Sarrusophone answered 28/7, 2016 at 4:26 Comment(0)
H
2

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)
            ...
        ]
};
Heaviness answered 11/3, 2017 at 12:28 Comment(1)
Enough only three: ...new webpack.ProvidePlugin({ $: 'jquery', jQuery: 'jquery', Tether: 'tether' }), ...Carpic
M
1

For webpack 1 or 2 with Bootstrap 4 you need

new webpack.ProvidePlugin({
   $: 'jquery',
   jQuery: 'jquery',
   Tether: 'tether'
})
Mayman answered 27/3, 2017 at 23:13 Comment(0)
C
1

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'
    }
}
Cothran answered 3/5, 2017 at 0:33 Comment(0)
G
1

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']);
});
Gros answered 4/7, 2017 at 10:20 Comment(1)
This really helped me. I was stuck on this for ages - didn't realise you could nest the require calls. Upvote for you, sir.Spindrift
M
1

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');
require('bootstrap');
Minstrelsy answered 27/2, 2018 at 18:43 Comment(0)
M
0

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
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 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.

Mok answered 21/3, 2016 at 18:15 Comment(0)
E
0

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');
Eggnog answered 2/5, 2016 at 3:4 Comment(0)
V
0

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"
}
Virnelli answered 30/7, 2016 at 21:57 Comment(0)
L
0

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

Liederkranz answered 3/4, 2017 at 1:36 Comment(0)
A
0

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/[email protected]/dist/js/tether.min.js"></script>
Antependium answered 7/6, 2017 at 19:2 Comment(0)
V
0

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>
Vitreous answered 23/7, 2017 at 6:15 Comment(0)
A
-2

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.

Apulia answered 1/2, 2017 at 8:46 Comment(0)

© 2022 - 2024 — McMap. All rights reserved.