I am importing bootstrap resources->js->bootstrap.js file and want to use Tooltip in blade
When I directly call bootstrap.min.js file in blade I am able to use bootatrsp 5 Tooltip but using Laravel Mix Webpack I am getting error. Below is a code and error
Code
document.querySelectorAll('.btn-clipboard').forEach(function(a) {
var b = new bootstrap.Tooltip(a);
a.addEventListener('mouseleave', function() {
b.hide()
})
});
window._ = require('lodash');
/**
* We'll load the axios HTTP library which allows us to easily issue requests
* to our Laravel back-end. This library automatically handles sending the
* CSRF token as a header based on the value of the "XSRF" token cookie.
*/
window.axios = require('axios');
window.axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';
/**
* Echo exposes an expressive API for subscribing to channels and listening
* for events that are broadcast by Laravel. Echo and event broadcasting
* allows your team to easily build robust real-time web applications.
*/
// import Echo from 'laravel-echo';
// window.Pusher = require('pusher-js');
// window.Echo = new Echo({
// broadcaster: 'pusher',
// key: process.env.MIX_PUSHER_APP_KEY,
// cluster: process.env.MIX_PUSHER_APP_CLUSTER,
// forceTLS: true
// });
import { Toast, Tooltip, Popover } from 'bootstrap';
@aavinseth You’re importing Bootstrap, but you’re then not assigning it to anything.
You should import the modules in your app.js file and then use them as is:
// resources/js/app.js
// Imports Tooltip plugin from bootstrap package
import { Tooltip } from 'bootstrap';
// Now use Tooltip plugin
document.querySelectorAll('.btn-clipboard').forEach((button) => {
// Notice no 'bootstrap.' prefix; plugin was imported as just Tooltip
let tooltip = new Tooltip(button);
button.addEventListener('mouseleave', () => {
tooltip.hide();
});
});
Well again, you need to actually assign it to something. But your JavaScript code should be contained to your app.js file; not randomly interspersed in PHP views across your app.
import * as bootstrap from 'bootstrap';
// Assign bootstrap to window variable
window.bootstrap = bootstrap;
// You can now do things like bootstrap.Tooltip in your views,
// but you really shouldn't be.