Enabling Bootstrap tooltips

Created on 17 November 2023, about 1 year ago
Updated 21 May 2024, 7 months ago

Problem/Motivation

I have a Drupal site with masses of anchors include data-toggle="tooltip" and they all work perfectly in the Bootstrap 3 theme but not at all with my Bootstrap 5 (3.0.10) sub-theme (created via the UI).

Questions

Including popper.js in my sub-theme

What is the best/correct/recommended way to include popper.js into my sub-theme?
Do I even need to do this, is that even the right thing to do to re-enable the use of Tooltips?

Official Bootstrap 5 documentation

The official Bootstrap 5 documentation states that including data-bs-toggle="tooltip in anchors will enable the tooltips as long as you are using either bootstrap.bundle.min.js or bootstrap.bundle.js. I am using the former but even then, I still do not see any Bootstrap-style tooltips, just the plain old default.

Bootstrap 5 theme's Library

I notice some intriguing-looking entries in the themes/contrib/bootstrap/js folder which talks about popovers and tooltips but I do not understand what this is all for, can anyone help/advise here please?

In summary, I just want to be able to enable Bootstrap style tooltips on my site!

Thanks all

💬 Support request
Status

Fixed

Version

3.0

Component

User interface

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
  • 🇬🇧United Kingdom SirClickALot Somerset
  • 🇮🇳India ravi kant Jaipur

    @SirClickalot
    Need to update data-toggle="tooltip" to data-bs-toggle="tooltip in your theme's templates.

  • 🇬🇧United Kingdom SirClickALot Somerset

    Hi @ravi kant,

    That was the first thing I tried and it made no difference :-(

    TBH, even with a very simple static HTML site where I have carefully checked the correct presence of the

    js/bootstrap.bundle.min.js /code> file with ...
    
    <code><script src="js/bootstrap.bundle.min.js"></script>

    ... in the <head>

    and...

     <button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-original-title="A tooltip"
                data-bs-placement="bottom" title="Tooltip on bottom">
            Tooltip on bottom
        </button>

    ... in the body, I still don't get any tooltips even then!

    I suppose my question to you is "are you seeing working BS tooltips?"

    Thanks for helping.

  • 🇮🇳India ravi kant Jaipur

    @SirClickalot
    May be some conflicts or JS error in console.
    Also try with moving js/bootstrap.bundle.min.js in bottom of tag from .

  • Have you initialised them?

    What worked for me was to include the following in my custom js file.

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

    as stated on the docs

  • 🇬🇧United Kingdom SirClickALot Somerset

    Hi @mellowtothemax,

    Thanks for the nudge, as a quick test I opened the Browser JavaScript console and entered...

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

    And hey presto, ...

    I'll now build that JS into my theme and we're done!

  • Status changed to Fixed 9 months ago
  • 🇩🇰Denmark ressa Copenhagen

    Thanks! With the help here, I got it working in my sub-theme ... First I verified the Bootstrap file with the Popper library was loaded:

    <script src="/themes/contrib/bootstrap5/dist/bootstrap/5.3.2/dist/js/bootstrap.bundle.js?v=5.3.2"></script>
    

    From that file:

      /**
       * jQuery
       */
    
      defineJQueryPlugin(Collapse);
    
      var top = 'top';
      var bottom = 'bottom';
      var right = 'right';
      var left = 'left';
      var auto = 'auto';
      var basePlacements = [top, bottom, right, left];
      var start = 'start';
      var end = 'end';
      var clippingParents = 'clippingParents';
      var viewport = 'viewport';
      var popper = 'popper';
      [...]
    

    Then I included this in my JavaScript file:

      $(window).on('load', function () {
        const tooltipTriggerList = document.querySelectorAll('[data-bs-toggle="tooltip"]')
        const tooltipList = [...tooltipTriggerList].map(tooltipTriggerEl => new bootstrap.Tooltip(tooltipTriggerEl))
      });
    

    ... and tested by adding a button in a Twig file:

    <button type="button" class="btn btn-secondary"
            data-bs-toggle="tooltip" data-bs-placement="top"
            data-bs-custom-class="custom-tooltip"
            data-bs-title="This top tooltip is themed via CSS variables.">
      Custom tooltip
    </button>

    Now, when I hover over the button, the text pops up. Awesome!

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

  • 🇬🇧United Kingdom tce

    Do we need to use once? For example...

          $(once('myId', '[data-bs-toggle="tooltip"]')).each(function() {
            var tooltip = new bootstrap.Tooltip(this);
          });
    

    Otherwise won't the function keep triggering multiple times with AJAX?

Production build 0.71.5 2024