Question 369010 in Laravel Question posted in
The official Laravel Documentation can be found here.

Bootstrap 5 tooltips not working in Laravel 9.x application

I’ve recently upgraded my Laravel application to use Bootstrap 5 and I’m having trouble getting Bootstrap’s tooltips to work. My application is running Laravel Framework 9.52.16 with Bootstrap 5.3.3 and popper.js 1.16.1.

While the default HTML tooltips work fine, I’m trying to use Bootstrap 5’s tooltips for their enhanced functionality and positioning. However, they don’t seem to appear no matter how I try to instantiate them. There are no errors in my console, the tooltips just don’t appear.

My site uses a structure where I have a layout.blade.php file, which loads all of my dependencies and provides a basic structure for the site. It then uses a series of @include or @yield statements to include content appropriate for the page the user is on at any given time.

I’ve tried to include the bootstrap instantiation code in the <script> tag at the bottom of layout.blade.php:

/** Instantiate all BS5 Tooltips */
var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'))
var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
    return new bootstrap.Tooltip(tooltipTriggerEl)
})

I’ve tried placing this in my $(function() {}); tag as well as in $(document).ready(function(){}); but neither corrected the issue. I’ve also tried adding defer to the script tag, that also did not resolve the issue. I’ve copied a few other various shorthand solutions from codepen in the same locations and they also did not work. Finally, I’ve also tried including the above code directly on the lowest-level page (the blade file that has the tooltips), but that ALSO did not resolve the issue.

If I stick an alert before the return statement, I can see that the code identifies each tooltip, but the tooltips do not appear when I hover over their container.

Here is an example tooltip from my HTML:

<i class="fas fa-question-circle help-icon" data-bs-toggle="tooltip" data-bs-placement="top" container="body" aria-label="Sample Text" data-bs-original-title="Sample Text"></i>

I’m a hobby developer and I’ve spent days figuring out how to use Mix properly to use all of BS5’s new functionality, only to hit this wall over tooltips. Any help would be greatly appreciated!

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    After referring to another laravel project from a friend I was able to find the issue here. The problem was actually that I was initiating the tooltips within a function in my tags. Placing the initialization code inside of $(function() {}); or $(document).ready(function(){}); caused the tooltips not to function. The init code had to be placed inside with no function surrounding it (basically literally right below my tag) to work.


  2. 0

    You can add a title attribute to your i tag to display a tooltip message.

    <i class="fas fa-question-circle help-icon" data-bs-toggle="tooltip" data-bs-placement="top" container="body" aria-label="Sample Text" title="Your Tooltip Message"></i>

    Alternatively, you can place the tooltip properties inside an anchor tag like this:

    <a href="#" data-bs-toggle="tooltip" data-bs-placement="top" title="Your Tooltip Message">
    <i class="fas fa-question-circle help-icon"></i>
</a>

    In both cases, replace "Your Tooltip Message" with the message you want to display in the tooltip.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search