Question

我使用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并加载您的控制台。

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>

有关最新的脚本版本，请参阅当前documentation。

仅Bootstrap 4 alpha：

Bootstrap 4 alpha 需要Tether，因此您需要在} 之前加入tether.min.js ，例如。

bootstrap.min.js

Answer 2

如果你正在使用Webpack：

按照docs中的说明设置bootstrap-loader;
通过npm安装tether.js;
将tether.js添加到webpack ProvidePlugin插件。

<强> webpack.config.js：

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

Source

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

运行命令：

捆绑安装
在application.js。
中的jQuery之后添加此行
// =需要jquery
// =需要系绳
重启rails服务器。

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

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)')
}

因此错误消息包含所需信息。

您可以从link下载档案。

未压缩版本：

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

Answer 10

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

Answer 11

我在使用最新的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版本应该没有问题。

Answer 12

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

Answer 13

对于带有Bootstrap 4的webpack 1或2，您需要

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

Answer 14

如果您使用的是早午餐，可以在brunch-config.js：

的末尾添加

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

Answer 15

如果您使用require.js AMD加载程序：

SELECT *
FROM flexible_products
WHERE updated_at >= DATE_FORMAT(NOW(), '%Y') AND
      updated_at < DATE_FORMAT(NOW() ,'%Y-%m-01')

Answer 16

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

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

Answer 17

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

确保在您的application.js文件中添加require jquery和tether，它们必须位于此顶部

//= require jquery
//= require tether

确保安装了系绳

Answer 18

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

Answer 19

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

<script src="https://npmcdn.com/tether@1.2.4/dist/js/tether.min.js"></script>

Answer 20

UMD / AMD解决方案

对于那些通过 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。

Answer 21

我建议您按照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>

Answer 22

对于运行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');

Answer 23

我有同样的问题，我在包含任何js之前通过包含jquery-3.1.1.min来解决它，它就像一个魅力。希望它有所帮助。

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

23 个答案:

对于Bootstrap 4稳定：

仅Bootstrap 4 alpha：

UMD / AMD解决方案

如何修复错误; ＆＃39;错误：Bootstrap工具提示需要Tether（http://github.hubspot.com/tether/)&#39;

23 个答案:

对于Bootstrap 4稳定：

仅Bootstrap 4 alpha：

UMD / AMD解决方案

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