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

Question

我正在使用 Bootstrap V4，控制台中记录了以下错误；

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

我已尝试通过安装 Tether 来消除错误，但没有成功。我通过包含以下代码行获得 'installed' Tether；

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

我 'installed' 系绳是否正确？

谁能帮我消除这个错误？

如果您想查看我网站上的错误，请单击 here 并加载您的控制台。

Answer 1

对于Bootstrap 4稳定：

因为 beta Bootstrap 4 不依赖于 Tether，而是 Popper.js。所有脚本（必须按此顺序）：

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

查看当前 documentation 以获得最新的脚本版本。

只有 Bootstrap 4 个阿尔法：

Bootstrap 4 alpha 需要 Tether，所以你需要在 tether.min.js 之前包含 您包括 bootstrap.min.js，例如

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

Answer 2

补充说明。如果检查未压缩的 javascript 文件，您会发现条件：

if(window.Tether === undefined) {
     throw new Error('Bootstrap tooltips require Tether (http://github.hubspot.com/tether)')
}

因此错误消息包含所需的信息。

You can download the archive from that link.

未压缩版本：

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

Answer 3

像下面这样通过 npm 安装 tether

npm install tether --save-dev

然后在 html 上方 bootstrap 添加系绳，如下所示

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

Answer 4

UMD/AMD 解决方案

对于那些通过 UMD 并通过 require.js 编译的人来说，有一个简洁的解决方案。

在需要tether作为依赖的模块中，加载Tooltip作为UMD，在模块定义前，只需在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
    */
    //...
});

开头的这个简短片段实际上可以放在应用程序的任何更高级别上，最重要的是 - 在实际使用具有 Tether 依赖项的 bootstrap 组件之前调用它.

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

更新： 在 Boostrap 4.1 稳定版中，他们用 Popper.js, see the documentation on usage.

替换了 Tether

Answer 5

我个人使用 Bootstrap 功能的一小部分，不需要连接 Tether。

这应该有帮助：

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

Answer 6

添加到@adilapapaya 的回答中。具体针对 ember-cli 用户，安装 tether 和

bower install --save tether

然后在 bootstrap 之前将其包含在您的 ember-cli-build.js 文件中，如下所示：

// 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');

Answer 7

如果您正在使用 npm 和 browserify：

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

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

Answer 8

如果您使用的是 Webpack：

按照文档中的描述设置 bootstrap-loader；
通过 npm 安装 tether.js；
添加 tether.js 到 webpack ProvidePlugin 插件。

webpack.config.js:

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

Source

Answer 9

我在使用最新的 boostrap 4 构建的 requirejs 时遇到了这个问题。我最后只是定义：

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

在我的 html 头标签中欺骗 bootstrap 的检查。然后我在加载我的应用程序之前添加了第二个 require 语句，随后，我的 bootstrap 依赖项：

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

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

串联使用这两个，使用当前的 bootstrap 4 alpha 版本应该没有问题。

Answer 10

如果使用 webpack，您将需要 expose 插件。在您的 webpack.config.js 中，添加此加载程序

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

Answer 11

你应该完成我的指南：
1. 将波纹管源添加到 Gemfile

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

运行命令：

捆绑安装
在application.js中的jQuery之后添加这一行。

//= 要求 jquery
//= 需要系绳
重新启动 rails 服务器。

Answer 12

使用 webpack 我在 webpack.config.js:

var plugins = [

    ...

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

似乎 Tether 就是它要找的那个：

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

Answer 13

我遇到了同样的问题，我通过在包含任何 js 之前包含 jquery-3.1.1.min 解决了这个问题，它就像一个魅力。希望对你有帮助。

Answer 14

适用于 generator-aspnetcore-spa 和 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)
            ...
        ]
};

Answer 15

对于带有 Bootstrap 4 的 webpack 1 或 2，你需要

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

Answer 16

我遇到了同样的问题，我就是这样解决的。我在 rails 5.1.0rc1

确保在 application.js 文件中添加 require jquery 和 tether 它们必须像这样位于最顶部

//= require jquery
//= require tether

只要确保安装了系绳

Answer 17

如果你想避免错误信息并且你没有使用Bootstrap工具提示，你可以在加载Bootstrap之前定义window.Tether。

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

Answer 18

如果您使用的是 Brunch，可以在 brunch-config.js:

的末尾添加

npm: {
    enabled: true,
    globals: {
        $: 'jquery', jQuery: 'jquery', 'Tether': 'tether'
    }
}

Answer 19

方法#1：从Here下载并将其插入到您的项目中，或者
方法#2：在 bootstrap 脚本源之前使用以下代码：

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

Answer 20

对于 webpack，我用 webpack.config.js:

解决了这个问题

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

Answer 21

如果您使用 require.js AMD 加载程序：

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

Answer 22

我建议按照 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>

Answer 23

为您 Laravel 混合用户运行ning Bootstrap4，您将需要运行

npm installer tether --save

然后更新你 resources/assets/js/bootstrap.js 以加载 Tether 并将其带到 window 对象。

这是我的样子：（注意我还必须运行 npm install popper.js --save）

window.$ = window.jQuery = require('jquery');
window.Popper = require('popper.js').default;
window.Tether = require('tether');
require('bootstrap');

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