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

Issue fork bootstrap5-3495408

Command icon Show commands

Start within a Git clone of the project using the version control instructions.

Or, if you do not have SSH keys set up on git.drupalcode.org:

About issue forks

Comments

sirclickalot created an issue. See original summary.

tom_ek’s picture

tom_ek commented

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 :)

sirclickalot’s picture

sirclickalot
Primary language English
Location Somerset, UK
commented

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
ravi kant’s picture

ravi kant commented

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

jannakha made their first commit to this issue’s fork.

jannakha opened merge request !87

jannakha’s picture

jannakha commented
Version: 4.0.3 » 4.0.x-dev
Component: Miscellaneous » Code
Status: Active » Needs review

Comment #3 is correct.
Always have a dependency on bootstrap5/bootstrap5-js-latest if using any bootstrap js features

Comment #4 is not correct. There's no requirement for jQuery with Bootstrap 5.

MR#84 for review - if boostrap specific js is inserted wiht asset injector, asset injector js is executed first and it will result in error. MR adds weight on bootsrap js to make sure it's loaded earlier.

please review.

abyss’s picture

abyss commented
Status: Needs review » Reviewed & tested by the community

Tooltips are now displayed, everything works as expected.
RTBC

vladimiraus changed the visibility of the branch 3495408-bootstrap-5-tooltips to hidden.

vladimiraus changed the visibility of the branch 3495408-bootstrap-5-tooltips to hidden.

vladimiraus’s picture

vladimiraus
Primary language English
Location Brisbane 🇦🇺
commented
Status: Reviewed & tested by the community » Fixed

Thank you for contribution. Committed.

Now that this issue is closed, review the contribution record.

As a contributor, attribute any organization that helped you, or if you volunteered your own time.

Maintainers, credit people who helped resolve this issue.

  • vladimiraus committed 544fcfe8 on 4.0.x 
    feat: #3495408 Bootstrap 5 Tooltips not working after update to Drupal...

Status: Fixed » Closed (fixed)

Automatically closed - issue fixed for 2 weeks with no activity.