Enabling Bootstrap tooltips

Issue created by @SirClickALot
Comment about 1 year ago →
🇬🇧United Kingdom SirClickALot Somerset
Comment about 1 year ago →
🇮🇳India ravi kant Jaipur
@SirClickalot
Need to update data-toggle="tooltip" to data-bs-toggle="tooltip in your theme's templates.
Comment about 1 year ago →
🇬🇧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.
Comment about 1 year ago →
🇮🇳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

Comment about 1 year ago →
🇬🇧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 8 months ago1:17pm 26 March 2024

Comment 8 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!

Comment 8 months ago →
System Message
Automatically closed - issue fixed for 2 weeks with no activity.
Comment 6 months ago →
🇬🇧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?

Enabling Bootstrap tooltips

Problem/Motivation

Questions

Including popper.js in my sub-theme

Official Bootstrap 5 documentation

Bootstrap 5 theme's Library

Comments & Activities