我使用Bootstrap V4并在控制台中记录以下错误;
错误：Bootstrap工具提示需要Tether （http://github.hubspot.com/tether/）
我试图通过安装Tether来消除错误，但它还没有奏效。我已安装＆＃39;系绳包括以下代码行;
<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>
我已安装＆＃39;系绳正确吗？
任何人都可以帮我删除此错误吗？
如果您希望在我的网站上查看错误，请点击here并加载您的控制台。
答案 0 :(得分：231)
因为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 alpha 需要Tether，因此您需要在} 之前加入tether.min.js ，例如。
bootstrap.min.js答案 1 :(得分：19)
如果你正在使用Webpack：
<强> webpack.config.js：
plugins: [
<... your plugins here>,
new webpack.ProvidePlugin({
$: "jquery",
jQuery: "jquery",
"window.jQuery": "jquery",
"window.Tether": 'tether'
})
]
答案 2 :(得分：18)
如果您使用的是npm和browserify：
// es6 imports
import tether from 'tether';
global.Tether = tether;
// require
global.Tether = require('tether');
答案 3 :(得分：14)
我个人使用Bootstrap功能的小子集，不需要附加Tether。
这应该有所帮助：
window.Tether = function () {
throw new Error('Your Bootstrap may actually need Tether.');
};
答案 4 :(得分：10)
如果您想避免错误消息并且未使用Bootstrap工具提示，则可以在加载Bootstrap之前定义window.Tether。
<script>
window.Tether = {};
</script>
<script src="js/bootstrap.min.js"></script>
答案 5 :(得分：8)
你应该完成我的指导方针：
1.将波纹管源添加到Gemfile
source 'https://rails-assets.org' do
gem 'rails-assets-tether', '>= 1.1.0'
end
运行命令：
捆绑安装
在application.js。
中的jQuery之后添加此行 // =需要jquery
// =需要系绳
重启rails服务器。
答案 6 :(得分：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>
答案 7 :(得分：6)
对于webpack，我使用webpack.config.js解决了这个问题：
new webpack.ProvidePlugin({
$: 'jquery',
jQuery: 'jquery',
"window.jQuery": "jquery",
Tether: 'tether'
})
答案 8 :(得分：5)
另外一张纸条。如果您检查未压缩的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
答案 9 :(得分：3)
使用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/)');
}
答案 10 :(得分：2)
我在使用最新的boostrap 4版本时遇到了这个问题。我最后定义了：
<script>
window.Tether = {};
</script>
在我的html head标签中愚弄bootstrap的检查。然后我在加载我的应用程序的require之前添加了第二个require语句，随后是我的引导程序依赖项：
require(['tether'], function (Tether) {
window.Tether = Tether;
});
require([
"app",
], function(App){
App.initialize();
});
同时使用这两者并使用当前的bootstrap 4 alpha版本应该没有问题。
答案 11 :(得分：2)
适用于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)
...
]
};
答案 12 :(得分：1)
对于带有Bootstrap 4的webpack 1或2，您需要
new webpack.ProvidePlugin({
$: 'jquery',
jQuery: 'jquery',
Tether: 'tether'
})
答案 13 :(得分：1)
如果您使用的是早午餐，可以在brunch-config.js：
npm: {
enabled: true,
globals: {
$: 'jquery', jQuery: 'jquery', 'Tether': 'tether'
}
}
答案 14 :(得分：1)
如果您使用require.js AMD加载程序：
SELECT *
FROM flexible_products
WHERE updated_at >= DATE_FORMAT(NOW(), '%Y') AND
updated_at < DATE_FORMAT(NOW() ,'%Y-%m-01')
答案 15 :(得分：0)
如果使用webpack，则需要使用公开插件。在你的webpack.config.js中，添加这个加载器
{
test: require.resolve("tether"),
loader: "expose?$!expose?Tether"
}
答案 16 :(得分：0)
我遇到了同样的问题，这就是我解决它的方法。 我在轨道5.1.0rc1
确保在您的application.js文件中添加require jquery和tether，它们必须位于此顶部
//= require jquery
//= require tether
确保安装了系绳
答案 17 :(得分：0)
添加到@ 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 :(得分：0)
方法＃1 ：从Here下载并将其插入您的项目，或者方法＃2 ：在您的引导程序之前使用以下代码脚本来源：
<script src="https://npmcdn.com/tether@1.2.4/dist/js/tether.min.js"></script>
答案 19 :(得分：0)
对于那些通过 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
*/
//...
});
最开始的这个简短代码段，实际上可以放在应用程序的任何更高级别上，最重要的是 - 在实际使用具有bootstrap依赖项的Tether组件之前调用它。 / p>
// ===== 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稳定中，他们用Popper.js替换 Tether ，请参阅the documentation on usage。
答案 20 :(得分：0)
我建议您按照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>
答案 21 :(得分：0)
对于运行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');
答案 22 :(得分：-2)
我有同样的问题，我在包含任何js之前通过包含jquery-3.1.1.min来解决它，它就像一个魅力。希望它有所帮助。