如何修复错误； '错误：引导工具提示需要 Tether (http://github.hubspot.com/tether/)'答案

【问题标题】：How to fix the error; 'Error: Bootstrap tooltips require Tether (http://github.hubspot.com/tether/)'如何修复错误； '错误：引导工具提示需要 Tether (http://github.hubspot.com/tether/)'
【发布时间】：2016-04-06 16:41:37
【问题描述】：

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

错误：引导工具提示需要 Tether (http://github.hubspot.com/tether/)

我尝试通过安装 Tether 来消除错误，但没有成功。我已经通过包含以下代码行“安装”了 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>

我是否正确“安装”了系绳？

谁能帮我消除这个错误？

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

【问题讨论】：

您好，您可以发布您使用的代码吗？如果您可以将代码放在 jsfiddle 或其他地方会更好。
没有真正的代码可发布，但如果您访问 www.atlasestateagents.co.uk 并查看控制台，您会看到 javascript 错误？
我使用了这些确切的代码行，他们在 V3 中为我消除了错误，任何想知道该版本的人。
@MichaelLB，而不是链接到你的网站，我建议在这里放一些 code-sn-ps，在问题本身中，你的网站是否会更新，它会失去真实性.
解决方案stackoverflow.com/questions/47431612/…

标签： javascript twitter-bootstrap bootstrap-4 tether

【解决方案1】：

对于 Bootstrap 4 稳定版：

由于测试版 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 alpha：

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>

【讨论】：

已修复，谢谢！然而，解决这个问题会导致一个新的警告，也许是一个新的问题？ 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'
太棒了！我认为您遇到的错误来自bootstrap.min.js 库。如果您将其注释掉，它是否仍然显示。是的，如果谷歌没有解决方案，我会发布一个新问题。 :)
考虑使用 npmcdn 链接到在 npm 上发布的包，因为有些人倾向于从 github 中删除 build/dist 文件。 https://npmcdn.com/tether@1.2.4/dist/ 和 https://npmcdn.com/bootstrap@4.0.0-alpha.2/dist/
但它很奇怪，v4-alpha.getbootstrap.com 没有说明任何内容
它适用于 aplha.3 版本。刚刚出现这个错误。我相信系绳现在作为一个包下载，不再包含在内。所以你也必须包含这个脚本。

【解决方案2】：

如果您使用的是 Webpack：

按照文档中的说明设置引导加载程序；
通过 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

【讨论】：

这就是你所需要的。我正在这样做，但它不起作用。
正如我在 Github 问题上提到的，较新版本的 Bootstrap（例如 4.0.0-alpha.6）现在正在寻找“Tether”而不是“window.Tether”。

【解决方案3】：

如果你使用的是 npm 和 browserify：

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

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

【讨论】：

【解决方案4】：

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

这应该会有所帮助：

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

【讨论】：

那么你有什么建议，剪掉这些线条？不好，因为您不应该修改 vendors 和 thirdparty 库，它会阻止您以后进行更新。如果你不按照你说的那样使用这些 Bootstrap 组件 - 你为什么需要 Tether ......所以我并不真正理解你输入的价值。
即使您不使用需要 Tether 的引导功能，也会显示 Tether 警告。我的解决方案在控制台中隐藏了烦人的消息。
而且此更改不会更新 3rdparty 或供应商脚本。可以在上面添加
我不太了解你，那为什么不只是单行，就像window.Tether = window.Tether || {};？另外，您的解决方案中有一个警告，如果模块将在您的事物执行之前加载，它可以在全局范围内擦除已定义的依赖项。
这是 Bootstrap alpha 版本的 hack。我看不出有什么挑剔的理由 :-) 如果开发人员不想使用 Tether，则不需要擦除已定义的依赖项。在我看来window.Tether = window.Tether || {}; 更糟糕，因为它会抛出Tether is not a function，而不是有意义的错误。

【解决方案5】：

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

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

【讨论】：

这对我来说效果很好......在我的情况下，我使用 angular 和 bootstrap。谢谢！
工作，我在我的文件中添加了相同的内容，现在工作正常。感谢这个想法。 window.Tether = {}; define(['tether'], function (Tether) { return window.Tether = Tether; });

【解决方案6】：

你应该完成我的指导：
1. 在 Gemfile 中添加以下源码

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

运行命令：

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

//= 需要 jquery
//= 需要系绳
重启 Rails 服务器。

【讨论】：

【解决方案7】：

如下所示通过 npm 安装系绳

npm install tether --save-dev

然后像下面这样在引导程序上方的 html 中添加系绳

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

【讨论】：

或 bower 像这样bower install tether --save-dev
不应该是npm install tether --save而不是--save-dev吗？生产中也需要它。

【解决方案8】：

对于 webpack，我使用 webpack.config.js 解决了这个问题：

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

【讨论】：

【解决方案9】：

附加说明。如果你检查未压缩的 javascript 文件，你会发现条件：

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

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

您可以从 link 下载存档。

未压缩版本：

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

【讨论】：

【解决方案10】：

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

【讨论】：

感谢工作，我建议您编辑答案以删除未使用的行tether: 'tether',
你是对的，但作为一个例子，我认为它说明了需要准确命名的事实。

【解决方案11】：

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

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

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

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

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

同时使用这两者，使用当前的 bootstrap 4 alpha 版本应该没有问题。

【讨论】：

【解决方案12】：

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

【讨论】：

三个就够了：...new webpack.ProvidePlugin({ $: 'jquery', jQuery: 'jquery', Tether: 'tether' }), ...

【解决方案13】：

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

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

【讨论】：

【解决方案14】：

如果您使用早午餐，您可以在brunch-config.js 末尾添加：

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

【讨论】：

【解决方案15】：

如果你使用 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']);
});

【讨论】：

这对我很有帮助。我被困了很久 - 没有意识到你可以嵌套 require 调用。为你投票，先生。

【解决方案16】：

对于那些运行 Bootstrap4 的 Laravel Mix 用户，你需要运行

npm installer tether --save

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

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

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

【讨论】：

【解决方案17】：

添加到@adilapapaya 的答案。对于ember-cli 用户，请安装tether

bower install --save tether

然后在引导之前将其包含在您的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');

【讨论】：

【解决方案18】：

如果使用 webpack，你将需要暴露插件。在你的 webpack.config.js 中，添加这个加载器

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

【讨论】：

【解决方案19】：

我遇到了同样的问题，这就是我解决它的方法。我在轨道上 5.1.0rc1

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

//= require jquery
//= require tether

只要确保安装了系绳

【讨论】：

【解决方案20】：

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

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

【讨论】：

【解决方案21】：

我建议按照Bootstrap 4 documentation 中的说明进行操作：

将样式表<link> 复制粘贴到您的<head> 之前样式表来加载我们的 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">

在您的末尾附近添加我们的 JavaScript 插件、jQuery 和 Tether 页，就在结束标记之前。一定要放置jQuery 首先是 Tether，因为我们的代码依赖于它们。虽然我们使用 jQuery 的在我们的文档中构建精简版，也支持完整版。

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

【讨论】：

【解决方案22】：

UMD/AMD 解决方案

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

在需要tether作为依赖的模块中，将Tooltip作为UMD加载，在模块定义前，只需在Tether的定义上加上短sn-p即可：

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

一开始的这个简短的 sn-p，实际上可以放在应用程序的任何更高级别，最重要的是 - 在实际使用具有 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']       
}

UPD：在 Boostrap 4.1 Stable 中，他们将 Tether 替换为 Popper.js，参见 the documentation on usage。

【讨论】：

【解决方案23】：

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

【讨论】：