Tooltips need associated JS libraries to work, according to the official documentation :

https://getbootstrap.com/docs/5.1/components/tooltips/

"Tooltips rely on the 3rd party library Popper for positioning. You must include popper.min.js before bootstrap.js or use bootstrap.bundle.min.js / bootstrap.bundle.js which contains Popper in order for tooltips to work!"

Are tooltips enabled in the BS5 template JS libraries?

I cannot get them to work using BS5 template 1.1.6 - when I include the popper.min.js in the before head of the template and activate with this

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

My page shows this error :

"ReferenceError: bootstrap is not defined"

Is there a way you recommend to activate tooltips in your BS5 template for T4 ?

D.

    dave_3d Could you put your site online and share the login info so we can check directly for you?

    and tell us the section that you're applying this tooltips.

        Let me know when the site is ready, I will check directly for you.

          4 days later

          saguaros

          I have setup an online version - detail for admin login updated above.

          There is a link to the page I am testing on the main menu. I explain again in that article what I am trying to achieve.

          D.

            Thanks for the explanation, let me check and will get back to you.

            7 days later

            Have you had a chance to try using tool tips yet?

            D.

            Hi Dave,

            I forwarded to our T4 team to take a look, kindly wait.

            6 months later

            Any news on this ?

            I would really like to be able to use standard Bootstrap 5 Modals and tooltips.

            D.

            dave_3d Hi

            With custom HTML module, you can try this way:

            1/ Open the override layout file of custom HTML module:

            /templates/t4_bs5_blank/html/mod_custom/default.php (if you don't have this override layout yet, you can copy from base folder in T4 plugin: /plugins/system/t4/themes/base/html/mod_custom/default.php)

            2/ Add this line of code:

            JHtml::_('bootstrap.tooltip', '[data-bs-toggle="tooltip"]');

            It will look like this:

            <?php
/**
 * @package     Joomla.Site
 * @subpackage  mod_custom
 *
 * @copyright   Copyright (C) 2005 - 2020 Open Source Matters, Inc. All rights reserved.
 * @license     GNU General Public License version 2 or later; see LICENSE.txt
 */

defined('_JEXEC') or die;
JHtml::_('bootstrap.tooltip', '[data-bs-toggle="tooltip"]');
?>


<div class="custom" <?php if ($params->get('backgroundimage')) : ?> style="background-image:url(<?php echo $params->get('backgroundimage'); ?>)"<?php endif; ?> >
	<?php echo $module->content; ?>
</div>

            The tooltips in custom HTML module will work then.

              Write a Reply...
              You need to Login to view replies.