After Update To Helix3 V3.0.x, The Front-end Edit Button (tooltip) Does Not Work

[woluweb]

See the following thread for details: https://www.joomshaper.com/forum/question/9731 I have had an exchange with Toufiq today on the Forum and he has found the issue AND has the fix.

Short version :

_Annoying issue on my website after updating to Helix3 v3.0.x (3.0.0 & 3.0.1 also) : when connected in front-end, the cog does appear, but hovering it does not show the "edit" button.

In the browser console, I see the following error.

Note : I have purged all cache on the website, also saved the Template Style just in case and forced refresh_

Uncaught TypeError: $(...).find(...).tooltip is not a function
    at initTooltips ((index):46)
    at HTMLDocument.<anonymous> ((index):46)
    at u (jquery.min.js?7b3746bac47cb276b877ae8d360bf884:2)
    at Object.fireWith [as resolveWith] (jquery.min.js?7b3746bac47cb276b877ae8d360bf884:2)
    at Function.ready (jquery.min.js?7b3746bac47cb276b877ae8d360bf884:2)
    at HTMLDocument._ (jquery.min.js?7b3746bac47cb276b877ae8d360bf884:2)

[MarcoRaoul]

I confirm a similar issue when listing the articles of a specific category:

Uncaught TypeError: $(...).find(...).popover is not a function at initPopovers ([article-name]) at HTMLDocument.<anonymous> ([article-name]) at fire (jquery.js:3232) at Object.fireWith [as resolveWith] (jquery.js:3362) at Function.ready (jquery.js:3582) at HTMLDocument.completed (jquery.js:3617)

Another error occur in a page where a scroller is enabled:

Uncaught TypeError: $(...).jscroll is not a function at HTMLDocument.<anonymous> ([article-name]) at fire (jquery.js:3232) at Object.fireWith [as resolveWith] (jquery.js:3362) at Function.ready (jquery.js:3582) at HTMLDocument.completed (jquery.js:3617)

Finally, I noticed a full incompatibility with Regular Labs Tabs module. It totally breaks...

[woluweb]

@MarcoRaoul : speaking about incompatibility with Regular Labs Tabs : the latter is only compatible with Bootstrap2 (like Protostar) and Bootstrap3. Not with Bootstrap4 and Bootstrap5... I think that the new generation (compatible with J4) will be independent of Bootstrap.

[pepperstreet]

In v3.0.2 the Tooltips do not work either. I have noticed by accident, after adding my own custom code for initialization, that the MAIN.JS file has a syntax error. It misses the correct syntax in the data attribute... probably older Bootstrap syntax.

PS: Will never ever understand why they had to change to Bootstrap v5 in Helix3 :(

Anyways, the MAIN.JS file has to be fixed. See data attribute below. https://github.com/JoomShaper/Helix3/pull/115

In the meantime, you can use custom code in template style settings or the custom.js file for a fix:

A.) Vanilla Javascript

window.onload = function() {  

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

}

B.) Vanilla Javascript

window.addEventListener('load', function() {

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

})

C.) jQuery (Joomla3 , Helix3)

jQuery(function($) {
    $(document).ready(function() {

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

    });
});

[pepperstreet]

@MarcoRaoul

I confirm a similar issue when listing the articles of a specific category:

Uncaught TypeError: $(...).find(...).**popover** is not a function at **initPopovers** ([article-name]) at HTMLDocument.<anonymous> ([article-name]) at fire (jquery.js:3232) at Object.fireWith [as resolveWith] (jquery.js:3362) at Function.ready (jquery.js:3582) at HTMLDocument.completed (jquery.js:3617)

Helix3 main.js does not initialize the POPOVER from Bootstrap5. So, you would have to follow my previous comment and custom JS code examples. To enable popovers everywhere you have to add the following code block. Actually, popovers even rely on the ToolTip functionality. The required popper.js should be included in Joomshapers Bootstrap5 bundle file.

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