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

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

提问by Michael LB

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

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

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

错误：Bootstrap 工具提示需要 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;

我试图通过安装 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>

Have I 'installed' tether correctly?

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

Can anyone help me remove this error?

谁能帮我消除这个错误？

If you wish to view the error on my site, please click hereand load your console.

如果您希望在我的网站上查看错误，请单击此处并加载您的控制台。

回答by adilapapaya

For Bootstrap 4 stable:

对于 Bootstrap 4 稳定版：

Since beta Bootstrap 4 doesn't depend on Tether but Popper.js. All scripts (must bein this order):

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

See the current documentationfor the newest script versions.

请参阅最新的脚本版本的当前文档。

---

---

Only Bootstrap 4 alpha:

只有 Bootstrap 4 alpha：

Bootstrap 4 alphaneeds Tether, so you need to include tether.min.jsbeforeyou include bootstrap.min.js, eg.

Bootstrap 4 alpha需要Tether，因此您需要在包含tether.min.js之前包含bootstrap.min.js，例如。

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

回答by Snowman

If you're using Webpack:

如果您使用的是 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.

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

webpack.config.js:

webpack.config.js：

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

Source

来源

回答by Jannic Beck

If you are using npm and browserify:

如果您使用 npm 和 browserify：

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

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

回答by Cezary Daniel Nowak

Personally I use small subset of Bootstrap functionality and don't need to attach Tether.

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

This should help:

这应该有帮助：

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

回答by Donald Rich

If you want to avoid the error message and you are not using Bootstrap tool tips, you can define window.Tether before loading Bootstrap.

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

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

回答by Quy Le

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

你应该完成我的指导方针：
1.将波纹管源添加到 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.

2. 运行命令：

   捆绑安装

3. 在 application.js 中的 jQuery 之后添加这一行。

   //= 需要 jquery
   //= 需要系绳

4. 重新启动 Rails 服务器。

回答by cjfarrelly

Install tether via npm like below

通过 npm 安装系绳，如下所示

npm install tether --save-dev

then add tether to your html above bootstrap like below

然后将系绳添加到引导程序上方的 html 中，如下所示

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

回答by opmind

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

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

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

回答by Anton Lyhin

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

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

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.jshttps://rawgit.com/HubSpot/tether/master/dist/css/tether.css

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

回答by Henry

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

使用 webpack 我在webpack.config.js：

var plugins = [

    ...

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

It seems like Tetherwas the one it was looking for:

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