I am stuck trying to call jQuery plugins for bootstrap like popover, tooltip, modals, ...
I am using webpack and this is my ES6 javascript:
import $ from 'jquery';
import Bootstrap from '../vendor/bootstrap.min.js';
class Test {
constructor () {
$('[data-toggle="tooltip"]').tooltip({ html: true });
}
}
I tried installing bootstrap with npm, but after that I was not sure which of the node modules I needed to import (for example, you can see the lines in the import in the comments). So, I decided to import directly bootstrap.min.js.
The thing is, I still have an error (regardless if I try to use popover / modals / tooltip), like this in mine app.js, which is my javascript generated from webpack:
Uncaught TypeError: (0 , _jquery2.default)(...).tooltip is not a function
Like I said, I'm stuck here.
Last thing: the boostrap CSS file works correctly:
gulp.task('bootstrap-fonts', function() {
return gulp.src('node_modules/bootstrap-sass/assets/fonts/bootstrap/*')
.pipe(gulp.dest('./app/assets/fonts/bootstrap'));
});
gulp.task('dev', ['css', 'bootstrap-fonts', 'browser-sync', 'webpack'], function () {
gulp.watch('src/scss/**/*.scss', ['css']);
gulp.watch('src/js/**/*.js', ['webpack']);
gulp.watch('app/*.html', ['bs-reload']);
});