I opened up bootstrap.min.css and found lots of bs-poppover references, so it appears that popper is already compiled with bootstrap 5 in Helix ultimate. However, when I try to use it on a page, such as the example below, it does not work. Am I missing a step?

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

This example is taken from https://getbootstrap.com/docs/5.0/components/popovers/

Also, I tried to initialize the popover by adding the following to the script section of custom code in my template:

var popoverTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="popover"]'))
var popoverList = popoverTriggerList.map(function (popoverTriggerEl) {
  return new bootstrap.Popover(popoverTriggerEl)
})

In theory, if popper.js was compiled with bootstrap 5, this script along with the example above should have worked.

Hi Daniel.

You can upload whole content of Popper.js file inside custom.js file, must be created first.

HERE: templates/shaper_helix3/js/custom.js

Sorry, but all kinds of JavaScript/php customizations are on your hands only.

Thanks Paul, that's very helpful.

Late to the party, but I had to deal with a similar task ;) In the meantime, current version of Helix Ultimate v2.0.11, it should work as expected. The PopOver initialization script is included in the template's main.js file. The actual PopOver component and the related ToolTip component are included in the Bootstrap5 bundle. So it should be enabled on the entire website.

Usage and syntax can be found here: https://getbootstrap.com/docs/5.1/components/popovers/

–––

PS: Regarding your older question 10 months ago... If you want to fire a custom script or initialization, you have to add a trigger or event. Something that starts the script, when entering the website. Actually, when the page is ready.

A.) Vanilla JavaScript

window.onload = function() { 
        // YOUR CODE HERE!
}

B.) Vanilla JavaScript

window.addEventListener('load', function() {
    // YOUR CODE HERE!
})

C.) If jQuery is loaded on your site

jQuery(function($) {
    $(document).ready(function() {
    // YOUR CODE HERE!
    });
});

Hope this helps.