Bootstrap 5 is not working on laravel project

Asked May 21 '22 at 19:12

Active May 21 '22 at 19:12

Viewed 276 times

I have a laravel project and I'm using Bootstrap 5 and the problem is tooltip is not working

I've tried many many ways that people suggested in Stackoverflow but none of them worked for me

Html:

<a href="#" data-bs-toggle="tooltip" data-bs-placement="left" title="Home"> <li class="mitem"> <i class="fas fa-home" aria-hidden="true"></i> </li> </a>

JS:

require('./bootstrap')
require('../../node_modules/bootstrap/dist/js/bootstrap.bundle.min')

$(document).ready(function() {
    $('[data-bs-toggle=tooltip]').tooltip();
});

Bootstrap version:

"bootstrap": "^5.1.3",

I even tried without -bs- but it didn't work neither

Bootstrap is loaded and everything is working except tooltip

asked May 21 '22 at 19:12

Alireza Behnamnik

Hi Alireza, please share what methods have you tried already ? – Amirali Amirifar May 21 '22 at 19:43
Hi Amirali , I have tried most of the methods that people have suggested here https://stackoverflow.com/questions/9446318/bootstrap-tooltips-not-working – Alireza Behnamnik May 21 '22 at 19:47
did you include your javascript tag at the end of your html page? – Amirali Amirifar May 21 '22 at 19:48
did you include latest version of jQuery in your file? – Amirali Amirifar May 21 '22 at 19:52
which javascript you mean? yes jquery is loaded ```import $ from 'jquery'; window.$ = window.jQuery = $;``` – Alireza Behnamnik May 21 '22 at 19:58
I meant the JS code you have added. – Amirali Amirifar May 21 '22 at 20:02
does a normal `console.log()` works? – Amirali Amirifar May 21 '22 at 20:03
Yes it does , but I have this error in console: ```jquery.js?8262:4059 Uncaught TypeError: jquery__WEBPACK_IMPORTED_MODULE_0___default(...)(...).tooltip is not a function``` – Alireza Behnamnik May 21 '22 at 20:10
the problem is probably from jQuery. look at this https://stackoverflow.com/questions/34290847/uncaught-typeerror-tooltip-is-not-a-function-error – Amirali Amirifar May 21 '22 at 20:12
https://stackoverflow.com/questions/41961708/uncaught-typeerror-tooltip-is-not-a-function – Amirali Amirifar May 21 '22 at 20:13
I moved the loading bootstrap.bundle line after loading jquery and it worked but the only problem now is data-placement is not working , tooltip is on top all the time :D – Alireza Behnamnik May 21 '22 at 20:41

Bootstrap 5 is not working on laravel project

0 Answers0