JA T4 Framework BS5 tooltips

dave_3d

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 ?

saguaros

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.

dave_3d

saguaros

Yes, I will work on that. I'll put something online.

But I am just using the t4_bs5_blank style.

I would just like to add tooltips, for example as shown in the examples in the Bootstrap web page :

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

saguaros

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

dave_3d

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.

saguaros

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

dave_3d

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

saguaros

Hi Dave,

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

dave_3d

Any news on this ?

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

dave_3d

The problem is that the Modal JS code is not loaded into a custom module either, same as this problem :

https://www.joomlart.com/forums/d/44767-t4-tabs-in-a-custom-module-does-not-load-tab-minjs-js-file

If I add:

<script src="/media/vendor/bootstrap/js/modal.min.js" type="module"></script>

Into the html it will work.

saguaros

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.