Bagaimana cara memperbaiki kesalahan; 'Kesalahan: Bootstrap tooltips membutuhkan Tether (http://github.hubspot.com/tether/)'

Saya menggunakan Bootstrap V4 dan kesalahan berikut dicatat di konsol;

Kesalahan: Bootstrap tooltips memerlukan Tether ( http://github.hubspot.com/tether/ )

Saya telah mencoba untuk menghapus kesalahan dengan menginstal Tether tetapi tidak berhasil. Saya telah 'menginstal' Tether dengan memasukkan baris kode berikut;

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

Sudahkah saya 'memasang' tether dengan benar?

Adakah yang bisa membantu saya menghapus kesalahan ini?

Jika Anda ingin melihat kesalahan di situs saya, silakan klik di sini dan muat konsol Anda.

Untuk Bootstrap 4 stable:

Karena beta Bootstrap 4 tidak bergantung pada Tether tetapi Popper.js . Semua skrip ( harus dalam urutan ini):

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

Lihat dokumentasi saat ini untuk versi skrip terbaru.

Hanya Bootstrap 4 alpha:

Bootstrap 4 alpha membutuhkan Tether , jadi Anda harus memasukkan tether.min.js sebelum memasukkan bootstrap.min.js, misalnya.

<script src="https://npmcdn.com/[email protected]/dist/js/tether.min.js"></script>
<script src="https://npmcdn.com/[email protected]/dist/js/bootstrap.min.js"></script>

Jika Anda menggunakan Webpack:

1. Atur bootstrap-loader seperti yang dijelaskan dalam dokumen;
2. Instal tether.js melalui npm;
3. Tambahkan tether.js ke plugin ProvidPlugin webpack.

webpack.config.js:

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

Sumber

Jika Anda menggunakan npm dan peramban:

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

// require
global.Tether = require('tether');

Secara pribadi saya menggunakan subset kecil dari fungsionalitas Bootstrap dan tidak perlu melampirkan Tether.

Ini akan membantu:

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

Jika Anda ingin menghindari pesan kesalahan dan Anda tidak menggunakan tips alat Bootstrap, Anda dapat menentukan window.Tether sebelum memuat Bootstrap.

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

Anda harus melakukan panduan saya:
1. Tambahkan sumber di bawah ini ke dalam Gemfile

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

2. Jalankan perintah:

   bundel instal

3. Tambahkan baris ini setelah jQuery di application.js.

   // = membutuhkan jquery
   // = membutuhkan tether

4. Mulai ulang server rel.

Instal tether melalui npm seperti di bawah ini

npm install tether --save-dev

kemudian tambahkan tether ke html Anda di atas bootstrap seperti di bawah ini

<script src="node_modules/tether/dist/js/tether.min.js"></script>
<script src="jspm_packages/github/twbs/[email protected]/js/bootstrap.js"></script>

Untuk webpack saya menyelesaikan ini dengan webpack.config.js:

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

Catatan tambahan. Jika Anda memeriksa file javascript yang tidak dikompresi, Anda akan menemukan kondisinya:

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

Jadi pesan kesalahan berisi informasi yang diperlukan.

Anda dapat mengunduh arsip dari tautan itu .

Versi tidak terkompresi:

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

Menggunakan webpack saya menggunakan ini di webpack.config.js:

var plugins = [

    ...

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

Sepertinya Tetheritu yang dicari:

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

Saya mengalami masalah ini dengan requirejs menggunakan buildraprap 4 build terbaru. Saya akhirnya hanya mendefinisikan:

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

di tag kepala html saya untuk menipu cek bootstrap. Saya kemudian menambahkan pernyataan membutuhkan kedua sebelum persyaratan yang memuat aplikasi saya, dan kemudian, ketergantungan bootstrap saya:

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

require([
  "app",
], function(App){
  App.initialize();
});

Menggunakan kedua hal ini bersama-sama dan Anda seharusnya tidak memiliki masalah menggunakan bootstrap 4 alpha build saat ini.

Bekerja untuk generator-aspnetcore-spa dan 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)
            ...
        ]
};

Untuk webpack 1 atau 2 dengan Bootstrap 4 yang Anda butuhkan

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

Jika Anda menggunakan Brunch, Anda dapat menambahkan ini di akhir brunch-config.js:

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

Jika Anda menggunakan loader AMD need.js:

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

Untuk Anda pengguna Laravel Mix di luar sana yang menjalankan Bootstrap4, Anda harus menjalankannya

npm installer tether --save

Kemudian perbarui Anda resources/assets/js/bootstrap.jsuntuk memuat Tether dan membawanya ke objek jendela.

Inilah yang terlihat seperti milik saya: (Catatan saya juga harus menjalankan npm install popper.js --save)

window.$ = window.jQuery = require('jquery');
window.Popper = require('popper.js').default;
window.Tether = require('tether');
require('bootstrap');

Untuk menambahkan jawaban @ adilapapaya. Khusus untuk ember-clipengguna, instal tetherdengan

bower install --save tether

dan kemudian memasukkannya ke dalam ember-cli-build.jsfile Anda sebelum bootstrap, seperti:

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

Dan jika menggunakan webpack, Anda akan memerlukan plugin expose. Di webpack.config.js Anda, tambahkan pemuat ini

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

Saya memiliki masalah yang sama dan ini adalah bagaimana saya menyelesaikannya. Saya di kereta 5.1.0rc1

Pastikan untuk menambahkan memerlukan jquery dan tether di dalam file application.js Anda, mereka harus di bagian paling atas seperti ini

//= require jquery
//= require tether

Pastikan untuk memasang tether

Metode # 1 : Unduh dari sini dan masukkan ke proyek Anda, atau
Metode # 2 : gunakan kode di bawah ini sebelum sumber skrip bootstrap Anda:

<script src="https://npmcdn.com/[email protected]/dist/js/tether.min.js"></script>

Saya merekomendasikan mengikuti instruksi dalam dokumentasi Bootstrap 4 :

Salin-tempel stylesheet <link>ke Anda <head>sebelum semua stylesheet lainnya untuk memuat CSS kami.

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

Tambahkan plugins JavaScript, jQuery, dan Tether kami di dekat akhir halaman Anda, tepat sebelum tag penutup. Pastikan untuk menempatkan jQuery dan Tether terlebih dahulu, karena kode kami tergantung pada mereka. Sementara kami menggunakan jQuery's slim build di dokumen kami, versi lengkapnya juga didukung.

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

Solusi UMD / AMD

Bagi mereka yang melakukannya melalui UMD , dan kompilasi viarequire.js , ada solusi singkat.

Dalam modul, yang memerlukan tetherdependensi, yang memuat Tooltipsebagai UMD, di depan definisi modul, cukup masukkan cuplikan singkat tentang definisi 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
    */
    //...
});

Cuplikan singkat ini di awal, sebenarnya dapat diletakkan di tingkat aplikasi Anda yang lebih tinggi, yang paling penting - untuk memohonnya sebelum penggunaan aktual bootstrapkomponen dengan Tetherketergantungan.

// ===== 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: Di Boostrap 4.1 Stable mereka mengganti Tether , dengan Popper.js , lihat dokumentasi tentang penggunaan .

Saya memiliki masalah yang sama dan saya menyelesaikannya dengan memasukkan jquery-3.1.1.min sebelum menyertakan js dan itu bekerja seperti pesona. Semoga ini bisa membantu.