Contrib.social

Bootstrap 5 Tooltips not working after update to Drupal 10.4

Open on Drupal.org →
Created on 21 December 2024, 4 months ago

Problem/Motivation

I have been using Bootstrap 5 tooltips in my Bootstrap5 subtheme for years now and I have crafted many instances of them by adding attributes via the UI and via custom templates like this...

        {% if flag.id()|clean_class == 'my-hit-list' %}
            <div{{ attributes.setAttribute('data-bs-title', 'Add this page to your<br><b>GENERAL HIT LIST</b> list.') }}></div>
        {% endif %}

Since the Drupal 10.4 update, NONE of them are working and if I look into the JavaScript console, I am now seeing this error...

custom.js?sotzhx:3 Uncaught ReferenceError: bootstrap is not defined
    at custom.js?sotzhx:3:69
    at Array.map (<anonymous>)
    at custom.js?sotzhx:3:45

I have always enabled the Bootstrap Tooltips by including that custom.js in my theme as below...

// Initialize Bootstrap5 tooltips.
const tooltipTriggerList = document.querySelectorAll('[data-bs-toggle="tooltip"]')
const tooltipList = [...tooltipTriggerList].map(tooltipTriggerEl => new bootstrap.Tooltip(tooltipTriggerEl))

...and I splice that custom.js file into my subtheme using the following in my <subtheme>.libraries.yml file...

global-styling:
  css:
    theme:
      css/style.min.css: {}
  js:
    js/custom.js: {}

Like I say, it's all been working fine until the Drupal 10.4 update.

What's changed, what I am doing that is now wrong?

Can anyone please help here.

Drupal 10.4.0
A custom subtheme Bootstrap5 (Bootstrap5 4.03)

Apache/2.4.33 (Win64) OpenSSL/1.0.2u mod_fcgid/2.3.9 PHP/8.3.1
PHP 8.3.7, memory limit: 256M
MySQL 5.7.24
PHP Caching module: OpCache
Web browser: Version 127.0.6533.89 (Official Build) (64-bit)

Thank you

💬 Support request
Status

Active

Version

4.0

Component

Miscellaneous

Created by

🇬🇧United Kingdom SirClickALot Somerset

Live updates comments and jobs are added and updated live.
Sign in to follow issues

Comments & Activities

  • Issue created by @SirClickALot
  • Comment 4 months ago →
    🇵🇱Poland trzcinski.t@gmail.com

    Hey!

    Just encountered a similar problem (though in a different theme).

    It looks like this is the cause: https://www.drupal.org/node/3473558 →

    Have not tried any fixes yet, but might lead you into the right direction :). I think here you could just set a dependency to your library, as per this:

    2. If a library has an undeclared dependency on another library, whether explicit use of its JavaScript API or implicit such as relying on markup, that may have previously worked 'by accident' due to the order of attachments during a request, but might not now. In these cases, just adding a dependency to the library definition should be sufficient.

    Hope that helps :)

  • Comment 4 months ago →
    🇬🇧United Kingdom SirClickALot Somerset

    I've just been experimenting with exactly that and I have managed to get my Tooltips going again by explicitly stating the JS dependency in my my <subtheme>.libraries.yml ...

    global-styling:
  css:
    theme:
      css/style.min.css: {}
  js:
    js/custom.js: {}
  dependencies:
    - bootstrap5/bootstrap5-js-latest
  • Comment 3 months ago →
    🇮🇳India ravi kant Jaipur

    @sirclickalot
    What error are in console?
    May be require jQuery dependency.

contrib.social Blog FAQ Discussions
Production build 0.71.5 2024