So beheben Sie den Fehler; 'Fehler: Bootstrap-Tooltips erfordern Tether (http://github.hubspot.com/tether/)'

Ich verwende Bootstrap V4 und der folgende Fehler wird in der Konsole protokolliert.

Fehler: Bootstrap-Tooltips erfordern Tether ( http://github.hubspot.com/tether/ )

Ich habe versucht, den Fehler durch die Installation von Tether zu beheben, aber es hat nicht funktioniert. Ich habe Tether durch Einfügen der folgenden Codezeilen "installiert".

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

Habe ich den Haltegurt richtig installiert?

Kann mir jemand helfen, diesen Fehler zu beheben?

Wenn Sie den Fehler auf meiner Website anzeigen möchten, klicken Sie hier und laden Sie Ihre Konsole.

Für Bootstrap 4 stabil:

Da Beta Bootstrap 4 nicht von Tether abhängt, sondern von Popper.js . Alle Skripte ( müssen in dieser Reihenfolge sein):

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

In der aktuellen Dokumentation finden Sie die neuesten Skriptversionen.

Nur Bootstrap 4 Alpha:

Bootstrap 4 alpha benötigt Tether , daher müssen Sie einschließen , tether.min.js bevor Sie einschließen bootstrap.min.js, z.

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

Wenn Sie Webpack verwenden:

1. Richten Sie den Bootstrap-Loader wie in den Dokumenten beschrieben ein.
2. Installieren Sie tether.js über npm.
3. Fügen Sie tether.js zum Webpack ProvidePlugin-Plugin hinzu.

webpack.config.js:

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

Quelle

Wenn Sie npm und browserify verwenden:

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

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

Persönlich verwende ich eine kleine Teilmenge der Bootstrap-Funktionalität und muss Tether nicht anhängen.

Dies sollte helfen:

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

Wenn Sie die Fehlermeldung vermeiden möchten und keine Bootstrap-Tooltipps verwenden, können Sie window.Tether definieren, bevor Sie Bootstrap laden.

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

Sie sollten meine Richtlinie
befolgen : 1. Fügen Sie Gemfile die folgende Quelle hinzu

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

2. Führen Sie den Befehl aus:

   Bundle installieren

3. Fügen Sie diese Zeile nach jQuery in application.js hinzu.

   // = erfordert jquery
   // = erfordert Tether

4. Starten Sie den Rails-Server neu.

Installieren Sie den Haltegurt wie unten beschrieben über npm

npm install tether --save-dev

Fügen Sie dann Ihrem HTML-Code über dem Bootstrap wie unten Tether hinzu

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

Für das Webpack habe ich dies gelöst mit webpack.config.js:

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

Ein zusätzlicher Hinweis. Wenn Sie die unkomprimierte Javascript-Datei überprüfen, finden Sie die Bedingung:

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

Die Fehlermeldung enthält also die erforderlichen Informationen.

Sie können das Archiv von diesem Link herunterladen .

Unkomprimierte Version:

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

Mit Webpack habe ich dies verwendet in webpack.config.js:

var plugins = [

    ...

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

Es scheint, als wäre Tetheres das, wonach es gesucht hat:

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

Ich hatte dieses Problem mit requirejs, die den neuesten Boostrap 4-Build verwendeten. Am Ende habe ich nur definiert:

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

in meinem HTML-Head-Tag, um den Bootstrap-Check zu täuschen. Ich habe dann eine zweite require-Anweisung hinzugefügt, kurz bevor die Anforderung meine App lädt, und anschließend meine Bootstrap-Abhängigkeit:

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

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

Wenn Sie beide zusammen verwenden, sollten Sie kein Problem damit haben, den aktuellen Alpha-Build für Bootstrap 4 zu verwenden.

Funktioniert für Generator-Aspnetcore-Spa und 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)
            ...
        ]
};

Für Webpack 1 oder 2 mit Bootstrap 4 benötigen Sie

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

Wenn Sie Brunch verwenden, können Sie dies am Ende Ihres brunch-config.js:

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

Wenn Sie den AMD-Loader require.js verwenden:

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

Für Ihre Laravel Mix-Benutzer, die Bootstrap4 ausführen, müssen Sie ausführen

npm installer tether --save

Aktualisieren Sie dann resources/assets/js/bootstrap.js, um Tether zu laden und zum Fensterobjekt zu bringen.

So sieht meine aus: (Hinweis, ich musste auch rennen npm install popper.js --save)

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

Zur Antwort von @ adilapapaya hinzufügen. Für ember-cliBenutzer speziell installieren tethermit

bower install --save tether

und fügen Sie es dann ember-cli-build.jsvor dem Bootstrap wie folgt in Ihre Datei ein:

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

Und wenn Sie Webpack verwenden, benötigen Sie das Expose-Plugin. Fügen Sie in Ihrer webpack.config.js diesen Loader hinzu

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

Ich hatte das gleiche Problem und so habe ich es gelöst. Ich bin auf Schienen 5.1.0rc1

Stellen Sie sicher, dass Sie in Ihrer application.js-Datei "require jquery and tether" hinzufügen. Diese müssen sich ganz oben befinden

//= require jquery
//= require tether

Stellen Sie einfach sicher, dass der Haltegurt installiert ist

Methode 1 : Von hier herunterladen und in Ihre Projekte einfügen oder
Methode 2 : Verwenden Sie den folgenden Code vor Ihrer Bootstrap-Skriptquelle:

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

Ich empfehle, die Anweisungen in der Bootstrap 4-Dokumentation zu befolgen :

Kopieren Sie das Stylesheet vor allen anderen Stylesheets <link>in Ihr <head>Stylesheet, um unser CSS zu laden.

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

Fügen Sie unsere JavaScript-Plugins, jQuery und Tether am Ende Ihrer Seiten direkt vor dem schließenden Tag hinzu. Stellen Sie sicher, dass Sie jQuery und Tether zuerst platzieren, da unser Code von ihnen abhängt. Während wir in unseren Dokumenten den schlanken Build von jQuery verwenden, wird auch die Vollversion unterstützt.

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

UMD / AMD-Lösung

Für diejenigen, die es über UMD tun und über kompilierenrequire.js , gibt es eine lakonische Lösung.

In dem Modul, das tetherals Abhängigkeit, die Tooltipals UMD geladen wird, vor der Moduldefinition benötigt wird, setzen Sie einfach einen kurzen Ausschnitt auf die Definition von 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
    */
    //...
});

Dieses kurze Snippet am Anfang kann tatsächlich auf einer höheren Ebene Ihrer Anwendung abgelegt werden. Dies ist das Wichtigste - es vor der tatsächlichen Verwendung von bootstrapKomponenten mit TetherAbhängigkeit aufzurufen .

// ===== 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: In Boostrap 4.1 Stable haben sie Tether durch Popper.js ersetzt (siehe Dokumentation zur Verwendung) .

Ich hatte das gleiche Problem und löste es, indem ich jquery-3.1.1.min einfügte, bevor ich js einfügte, und es funktionierte wie ein Zauber. Ich hoffe es hilft.