Tooltips not showing in Laravel 11 with Bootstrap 5, PopperJs and jQuery - SASS

I am not getting any errors in JS console, but for whatever reason my Tooltips will not show.

In my app.js I have...

import './bootstrap';
import 'bootstrap';
import jQuery from 'jquery';
import Cookies from 'js-cookie';

window.jQuery = jQuery;
window.Cookies = Cookies;

My button...

<button class="btn btn-sm btn-warning float-end" data-bs-toggle="tooltip" data-bs-placement="top" title="Permissions">
			<i class="fas fa-user-shield"></i>
</button>

Initialization of tooltip...

<script type="module">
    document.addEventListener('DOMContentLoaded', function () {
        const tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'));
        const tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
            return new Tooltip(tooltipTriggerEl);
        });
    });
</script>

No errors in js console, when i hover i just get the basic title tooltip.

Bootstrap modals are working so i know bootrap is loaded, ajax is working so i know jquery is loaded, any ideas?

Thanks!

tykus

1 year ago

Level 104

Where is Popper.js being loaded?

martinbean

1 year ago

Best Answer

Level 80

@mfoote How are you including app.js in your view? Also, jQuery is not required for Bootstrap 5.

I personally just enable the tooltips in my app.js file since it’s loaded via Vite, so automatically deferred and initialised after the DOM has loaded:

import * as bootstrap from 'bootstrap';

window.bootstrap = bootstrap;

document.querySelectorAll('[data-bs-toggle="tooltip"]', (el) => new window.bootstrap.Tooltip(el));

mfoote

1 year ago

Level 4

@tykus it was my understanding that popper loaded with boostrap's js.

@martinbean i tried what you suggested, i get the same thing, no JS errors, just not showing up. doing some checking, it feels like its a css thing, like not loading in the right order etc.

I am including app.js with the vite directive.

@vite(['resources/sass/app.scss', 'resources/js/app.js'])

mfoote

1 year ago

Level 4

So, not sure why your selector did not work for me, it should have, but the following works...

new window.bootstrap.Tooltip(jQuery('[data-bs-toggle="tooltip"]'));

LaryAI

1 year ago

Level 58

To resolve the issue with tooltips not showing in your Laravel 11 application using Bootstrap 5, Popper.js, and jQuery, you need to ensure that the tooltips are properly initialized. Here are a few steps and corrections you can follow:

Ensure Bootstrap's JavaScript is Properly Imported: Make sure that Bootstrap's JavaScript is correctly imported in your app.js. Since you're using ES6 imports, ensure that Popper.js is also included, as Bootstrap 5 requires it for tooltips and popovers.
Correct Tooltip Initialization: The initialization code you provided is almost correct, but you need to ensure that the Tooltip class is correctly referenced from Bootstrap. Here's how you can do it:

import './bootstrap';
import 'bootstrap';
import jQuery from 'jquery';
import Cookies from 'js-cookie';

// Ensure Popper.js is available
import { Tooltip, Popover } from 'bootstrap';

window.jQuery = jQuery;
window.Cookies = Cookies;

document.addEventListener('DOMContentLoaded', function () {
    const tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'));
    const tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
        return new Tooltip(tooltipTriggerEl);
    });
});

Check HTML Structure: Ensure that your HTML structure is correct and that the data-bs-toggle attribute is properly set. Your button HTML looks correct, but double-check for any typos or mismatches.
Verify CSS: Ensure that Bootstrap's CSS is properly loaded in your application. Without the correct styles, the tooltips might not display as expected.
Check for Conflicts: Ensure there are no JavaScript conflicts or errors elsewhere in your code that might prevent the tooltips from initializing.
Browser Console: Even though you mentioned no errors, double-check the browser console for any warnings or errors that might give additional clues.

By following these steps, you should be able to get the tooltips working in your application. If the issue persists, consider creating a minimal reproducible example to isolate the problem further.

Please or to participate in this conversation.