如何解决错误; '错误：引导工具提示需要Tether（http://github.hubspot.com/tether/）'

我正在使用Bootstrap V4，并在控制台中logging以下错误：

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

我是否正确安装了系绳？

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

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

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

 <script src="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>

如果您使用npm和browserify： 

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

如果您使用的是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' }) ]

资源

我个人使用Bootstrapfunction的小子集，并不需要附加Tether。

这应该有所帮助： 

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

你应该做我的指导方针：
1.将下面的源添加到Gemfile中 

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

  1. 运行命令：

    捆绑安装

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

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

  3. 重新启动rails服务器。

像下面那样通过npm安装系绳 

 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>

一个额外的笔记。 如果你检查未压缩的JavaScript文件，你会发现条件： 

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

所以错误信息包含所需的信息。

您可以从该链接下载档案。

无压缩版本：

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

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

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

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

requirejs使用最新的boostrap 4版本来解决这个问题。 我最终定义了： 

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

在我的HTML头标签愚人bootstrap的检查。 然后，在加载我的应用程序的require之前添加了第二个require语句，随后添加了引导依赖项： 

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

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

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

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

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

对于使用Bootstrap 4的webpack 1或2，您需要 

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

如果你使用的是Brunch，你可以在你的brunch-config.js的最后加上： 

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

UMD / AMD解决scheme

对于那些通过UMD进行编译并通过require.js编译的require.js ，我发现了简洁的解决scheme。

在需要tether作为依赖项的模块中，在模块定义之前加载了Tooltip作为UMD，只需在tether的定义中join简短的代码即可： 

 // 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的开发人员将在下一个版本中解决他们的问题时，可以通过search@todo轻松删除全局范围。

要添加到@ 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');

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

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

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

确保在你的application.js文件里面添加require jquery和tether，它们必须在这个顶部 

 //= require jquery //= require tether

只要确保安装系绳

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

 <script src="tether@1.2.4/dist/js/tether.min.js"></script>

如果你使用require.js AMD loader： 

 // path config requirejs.config({ paths: { jquery: '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']); });

我build议遵循Bootstrap 4文档中的说明 ：

在所有其他样式表加载我们的CSS之前，将样式表<link>复制粘贴到<head> 。 

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

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

Interesting Posts