182

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>

テザーを正しく「インストール」しましたか?

このエラーを削除するのを手伝ってくれる人はいますか?

私のサイトでエラーを表示したい場合は、ここをクリックしてコンソールをロードしてください。

4

23 に答える 23

243

Bootstrap 4 安定版の場合:

ベータ版以降、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 アルファのみ:

Bootstrap 4 alphaにはTetherが必要なので、含める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>
于 2016-01-03T20:38:19.217 に答える
18

npm と browserify を使用している場合:

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

// require
global.Tether = require('tether');
于 2016-06-07T14:20:55.173 に答える
8

私のガイドラインを実行する必要があります:
1. 次のソースを Gemfile に追加します。

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

  1. コマンドを実行します。

    バンドル インストール

  2. application.js の jQuery の後にこの行を追加します。

    //= jquery が必要
    //= テザーが必要

  3. レール サーバーを再起動します。

于 2016-11-19T16:57:53.417 に答える
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>
于 2016-02-03T17:54:23.320 に答える
0

And if using webpack, you will need the expose plugin. In your webpack.config.js, add this loader

{
   test: require.resolve("tether"),
   loader: "expose?$!expose?Tether"
}
于 2016-07-30T21:57:57.010 に答える
0

UMD/AMD ソリューション

UMDを介して実行し、 を介してコンパイルする人require.jsには、簡潔な解決策があります。

依存関係として必要なモジュールでは、UMD としてtetherロード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']       
}

UPD: Boostrap 4.1 Stableでは、 TetherをPopper.jsに置き換えました。使用法に関するドキュメントを参照してください。

于 2016-03-21T18:15:12.810 に答える
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');
于 2016-05-02T03:04:15.027 に答える