Как исправить ошибку; «Ошибка: для всплывающих подсказок Bootstrap требуется Tether (http://github.hubspot.com/tether/)»

Если вы используете Webpack:

• Настройка загрузочного загрузчика, как описано в документах;
• Установить tether.js через npm;
• Добавьте tether.js в webpack ProvidePlugin плагин.

webpack.config.js:

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

Источник

Если вы используете npm и просматриваете браузер:

// 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, вы можете определить window.Tether перед загрузкой Bootstrap.

<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

2. Команда запуска:

   пакет установить

3. Добавьте эту строку после jQuery в application.js.

   //= требуется jquery
     // = require tether

4. Перезагрузите сервер рельсов.

Установите привязку через npm, как показано ниже

npm install tether --save-dev

затем добавьте привязку к вашему html над бутстрапом, как показано ниже

<script src="node_modules/tether/dist/js/tether.min.js"></script>
<script src="jspm_packages/github/twbs/[email protected]/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)')
}

Таким образом, сообщение об ошибке содержит требуемую информацию.

Вы можете загрузить архив из link.

Несжатая версия:

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

Работает для генератора-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)
            ...
        ]
};

У меня была эта проблема с requirejs, используя новейшую сборку boostrap 4. Я просто определил:

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

в моем теге html head, чтобы обмануть проверку начальной загрузки. Затем я добавил вторую инструкцию require перед загрузкой моего приложения, а затем с моей загрузкой:

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

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

Использование обоих из них в тандеме, и у вас не должно возникнуть проблемы с использованием текущей сборки bststart 4.

Если вы используете load.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']);
});

Если вы используете Brunch, вы можете добавить это в конце своего brunch-config.js:

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

Для webpack 1 или 2 с Bootstrap 4 вам нужно

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

Для пользователей Laravel Mix, использующих Bootstrap4, вам нужно будет запустить

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

Я рекомендую следовать инструкциям в Документация Bootstrap 4:

Скопируйте-вставьте таблицу стилей <link> в свой <head>, прежде чем все остальные stylesheets для загрузки нашего 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, так как наш код зависит от них. Хотя мы используем jQuerys тонкая сборка в наших документах, полная версия также поддерживается.

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

Метод # 1: скачайте с здесь и вставьте его в свои проекты или
Метод # 2: используйте код ниже перед загрузкой script source:

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

У меня была такая же проблема, и я решил это. Я на рельсах 5.1.0rc1

Обязательно добавьте требуемый jquery и tether внутри вашего файла application.js, они должны быть на самом верху, как этот

//= require jquery
//= require tether

Просто убедитесь, что установлен тросик

И если вы используете webpack, вам понадобится плагин expose. В свой webpack.config.js добавьте этот загрузчик

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

Чтобы добавить к ответу @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');

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.

// ===== file: tetherWrapper.js =====
require(['./tether'], function(Tether) {
    window.Tether = Tether; // attach to global scope
    // it 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, см. Документацию по использованию.

У меня была та же проблема, и я решил ее, включив jquery-3.1.1.min, прежде чем включать js, и это сработало как шарм. Надеюсь, что это поможет.