Similar to modals, you can no longer use the mootools tooltips. i.e JHtml::_('behavior.tooltip'); You will need to switch to bootstrap tooltips.


Tooltip markup is different for Bootstrap 5, however, you can safely use both markups in the same HTML.


For J4 add the following to your page:


HTMLHelper::_('bootstrap.popover');


Then on the elements you want the tooltips use/add the following attributes:


data-bs-toggle="tooltip" data-bs-placement="top" (or wherever you want the tooltip to be placed).


You will also need at activate the tooltips on page load (or on the return from an ajax call that returns markup with tooltips). The following code checks to see if Bootstrap 5 is loaded and if so uses the Bootstrap 5 activation logic, otherwise it uses the pre BS5 logic.


       if (typeof bootstrap !== 'undefined') {

               /* Bootstrap 5 tooltips. */

               var tooltipTriggerList = [].slice.call(el.querySelectorAll('[data-bs-toggle="tooltip"]'));

               if (tooltipTriggerList.length > 0) {

                       var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {

                         return new bootstrap.Tooltip(tooltipTriggerEl, {animation: false});

                        });

               }

       } else {

               /* Pre bootstrap 5 tooltips */

               jQuery(el).tooltip({ selector: '[data-toggle=tooltip]' });


       }


Detailed reference to this BS5 info is here: https://getbootstrap.com/docs/5.0/components/tooltips/


Note: at the current time there is a bug in the bootstrap tooltips. You need to change the return statements as follows:


return new bootstrap.Tooltip(tooltipTriggerEl, {animation: false});


Details of this issue are here: https://github.com/twbs/bootstrap/issues/32372