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

Question

我正在使用Bootstrap V4,并在控制台中记录以下错误;

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

我是否正确安装了系绳？

任何人都可以帮我删除此错误？

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

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>

有关最新脚本版本,请参阅当前文档.

只有Bootstrap 4 alpha:

Bootstrap 4 alpha需要系绳,所以你需要在包括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

如果您使用的是Webpack:

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

webpack.config.js:

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

资源

Answer 3

如果您使用的是npm和browserify:

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

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

Answer 4

我个人使用Bootstrap功能的小子集,不需要附加Tether.

这应该有所帮助:

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

Answer 5

如果要避免出现错误消息并且未使用Bootstrap工具提示,则可以在加载Bootstrap之前定义window.Tether.

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

Answer 6

您应该完成我的指导:
1.将波纹管源添加到Gemfile中

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

2. 运行命令:

   捆绑安装

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

   // = require jquery
   // = require tether

4. 重启rails服务器.

Answer 7

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

npm install tether --save-dev

然后将tether添加到你的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 8

对于webpack我用(webpack.config.js)解决了这个问题:

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

Answer 9

另外一个说明.如果您检查未压缩的javascript文件,您将找到以下条件:

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

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

您可以从该链接下载存档.

未压缩版本:

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