我正在使用 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>
我是否正确“安装”了系绳？
谁能帮我消除这个错误？
如果您想在我的网站上查看错误，请单击此处并加载您的控制台。
由于 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需要Tether，因此您需要在 includetether.min.js 之前include 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>
如果您使用的是 Webpack：
webpack.config.js：
plugins: [
<... your plugins here>,
new webpack.ProvidePlugin({
$: "jquery",
jQuery: "jquery",
"window.jQuery": "jquery",
"window.Tether": 'tether'
})
]
如果你使用 npm 和 browserify：
// es6 imports
import tether from 'tether';
global.Tether = tether;
// require
global.Tether = require('tether');
我个人使用 Bootstrap 功能的一小部分，不需要附加 Tether。
这应该有助于：
window.Tether = function () {
throw new Error('Your Bootstrap may actually need Tether.');
};
如果您想避免错误消息并且您没有使用 Bootstrap 工具提示，您可以在加载 Bootstrap 之前定义 window.Tether。
<script>
window.Tether = {};
</script>
<script src="js/bootstrap.min.js"></script>
您应该完成我的指导：
1. 将波纹管源代码添加到 Gemfile
source 'https://rails-assets.org' do
gem 'rails-assets-tether', '>= 1.1.0'
end
运行命令：
捆绑安装
在 application.js 中的 jQuery 之后添加这一行。
//= 需要 jquery
//= 需要系绳
重启 Rails 服务器。
通过 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>
对于 webpack，我解决了这个问题webpack.config.js：
new webpack.ProvidePlugin({
$: 'jquery',
jQuery: 'jquery',
"window.jQuery": "jquery",
Tether: 'tether'
})
附加说明。如果您检查未压缩的 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
使用 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/)');
}
我在使用最新的 boostrap 4 版本时遇到了 requirejs 的这个问题。我最终只是定义：
<script>
window.Tether = {};
</script>
在我的 html 头标签中欺骗引导程序的检查。然后，我在加载我的应用程序的 require 之前添加了第二个 require 语句，随后是我的引导依赖项：
require(['tether'], function (Tether) {
window.Tether = Tether;
});
require([
"app",
], function(App){
App.initialize();
});
串联使用这两者，使用当前的 bootstrap 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)
...
]
};
对于带有 Bootstrap 4 的 webpack 1 或 2，您需要
new webpack.ProvidePlugin({
$: 'jquery',
jQuery: 'jquery',
Tether: 'tether'
})
如果你使用的是早午餐，你可以在你的末尾添加这个brunch-config.js：
npm: {
enabled: true,
globals: {
$: 'jquery', jQuery: 'jquery', 'Tether': 'tether'
}
}
如果你使用 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']);
});
对于那些运行 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');
对于那些通过UMD进行并通过编译的人来说require.js，有一个简洁的解决方案。
在需要tether作为依赖项的模块中，作为 UMD 加载Tooltip，在模块定义之前，只需在 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
// ===== 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']
}
添加到@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');
如果使用 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="https://npmcdn.com/tether@1.2.4/dist/js/tether.min.js"></script>
我建议遵循Bootstrap 4 文档中的说明：
将样式表复制粘贴
<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>
我有同样的问题，我通过在包含任何 js 之前包含 jquery-3.1.1.min 来解决它，它就像一个魅力。希望能帮助到你。