Enable Bootstrap 5 tooltip

[bucari]

Hi, according to the bootstrap 5 documentation, to enable tooltip i have to insert this script in my page

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

adding it to my app.blade.php file

...
@stack('modals')   

@livewireScripts

<script>
    var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'))
    var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
        return new bootstrap.Tooltip(tooltipTriggerEl)
    })
</script>    
@stack('scripts')
...

gives me this error
Uncaught ReferenceError: bootstrap is not defined

where should i insert it?

thanks

[jhjvandenbroek]

For me the solution was to change

<script src="{{ mix('js/app.js') }}" defer></script>

to

<script src="{{ mix('js/app.js') }}"></script>

[jhjvandenbroek]

If you want to solve the "bootstrap is not defined" but keep the defer you can also solve it with window.onload. It acts kind of like jQuery $(document).ready(function(){ ... });

The way I just tested this is:

<script>
    window.onload = function () {
        var popoverTriggerList = [].slice.call(document.querySelectorAll('.coreuiPopover'))
        var popoverList = popoverTriggerList.map(function (popoverTriggerEl) {
            return new coreui.Popover(popoverTriggerEl);
        });
    };
</script>

Then you can easily have multiple popovers. Just add class coreuiPopover to them

    <a class="btn btn-lg btn-danger coreuiPopover" tabindex="0" role="button" data-coreui-toggle="popover" data-coreui-trigger="hover focus" title="" data-coreui-content="And here's some amazing content. It's very engaging. Right?" data-coreui-original-title="Dismissible popover">Hover popover</a>
    <a class="btn btn-lg btn-danger coreuiPopover" tabindex="0" role="button" data-coreui-toggle="popover" data-coreui-trigger="focus" title="" data-coreui-content="And here's some amazing content. It's very engaging. Right?" data-coreui-original-title="Dismissible popover">Dismissible popover</a>
    <a class="btn btn-lg btn-danger coreuiPopover" tabindex="0" role="button" data-coreui-toggle="popover" data-coreui-trigger="focus" title="" data-coreui-content="And herfsdfsdy engaging. Right?" data-coreui-original-title="Dismissible popover">Dismissible popover 2</a>

Note this is assuming you have coreUi preset installed via Jetstrap. You can also use normal bootstrap popover by changing coreui.Popover to bootstrap.Popover

[bucari]

thank you
i solved with window.onload