3
類似の質問が表示されます。hereとhereが提供されていますが、JQueryとブートストラップがインストールされているにもかかわらず、ツールチップが機能しない
私は、npmを使用してbootstrap 4 alpha 6をツールチップの機能に必要な依存関係であるtether.jsとともにインストールする、私のサーバーにNode/Express/Webpackスタックを持っています。私のメインのJSファイルでは、WebPACKのコンフィグで定義されているように、私が使用してテザーを輸入して、次のスニペット使用してブートストラップツールチップ機能を初期化している：私のインデックスで、その後
$(function() {
$('[data-toggle="tooltip"]').tooltip()
})
：
import "tether";
とを
<button type="button" class="btn btn-secondary" data-toggle="tooltip" title="Tooltip on top">
Tooltip on top
</button>
SCRI：.hbs（私は私のページをレンダリングするためにハンドルを使用しています）、私はツールチップを実装する次のコードを持っていますptsはエラーや警告なしで正常にコンパイルされます。しかし、ブラウザにページを読み込むときに、私はtooltip is not a function...と言うエラーを受け取ります。これは起こってはいけない、そうですか？上記のように、私は、任意のしゃっくりなしでレンダリングされた右のツールチップを初期化する1未満にjQueryのには、次のスニペットとして正常に動作していることを確認することができます
$('p#some').html('from jquery');
以下からわかるように、jQueryとのための1と一緒にテザーのプラグインの両方を
plugins: [
new webpack.optimize.UglifyJsPlugin({ mangle: false, sourcemap: false }),
new ExtractTextPlugin({ filename: "../../public/dist/main.min.css" }),
new webpack.ProvidePlugin({
$: "jquery",
jQuery: "jquery",
"window.jQuery": "jquery",
Tether: "tether",
"window.Tether": "tether",
Alert: "exports-loader?Alert!bootstrap/js/dist/alert",
Button: "exports-loader?Button!bootstrap/js/dist/button",
Carousel: "exports-loader?Carousel!bootstrap/js/dist/carousel",
Collapse: "exports-loader?Collapse!bootstrap/js/dist/collapse",
Dropdown: "exports-loader?Dropdown!bootstrap/js/dist/dropdown",
Modal: "exports-loader?Modal!bootstrap/js/dist/modal",
Popover: "exports-loader?Popover!bootstrap/js/dist/popover",
Scrollspy: "exports-loader?Scrollspy!bootstrap/js/dist/scrollspy",
Tab: "exports-loader?Tab!bootstrap/js/dist/tab",
Tooltip: "exports-loader?Tooltip!bootstrap/js/dist/tooltip",
Util: "exports-loader?Util!bootstrap/js/dist/util",
}),
new webpack.LoaderOptionsPlugin({ postcss: [autoprefixer] }),
]
プロジェクトファイルは、それが助け場合の内部レポhereとして使用できます。ツールチップは、私のwebpack.config.jsファイルで開始されています。