1

We have added tooltips to our node form using this method: https://inclusive-components.design/tooltips-toggletips/

It includes a JavaScript/jQuery snippet that works perfectly except...

  • If the tooltip is inside an image file upload, it works, but if you upload an image and that field updates, then the tooltip no longer works.

  • If the tooltip is inside a multi-line field, it works, but if you add a new item, the tooltip no longer works.

The other tooltips keep working. It's as if those tooltips were removed from the document.querySelectorAll. Would this have something to do with Drupal 8's AJAX updating those fields?

Here is the JS:

(function ($) {

  $(document).ready(function() {
    console.log("dom is ready");
    // Get all the toggletip buttons
    var toggletips = document.querySelectorAll('[data-toggletip-content]');

    // Iterate over them
    Array.prototype.forEach.call(toggletips, function (toggletip) {
      // Get the message from the data-content element
      var message = toggletip.getAttribute('data-toggletip-content');

      // Get the live region element
      var liveRegion = toggletip.nextElementSibling;

      // Toggle the message
      toggletip.addEventListener('click', function () {
        console.log('clicky');
        liveRegion.innerHTML = '';
        window.setTimeout(function() {
          liveRegion.innerHTML = '<span class="alert alert-info isu-alert_sm isu-tooltip-bubble">'+ message +'</span>';
        }, 100);
      });

    // Close on outside click
    document.addEventListener('click', function (e) {
      if (toggletip !== e.target) {
        liveRegion.innerHTML = '';
      }
    });

    // Remove toggletip on ESC
    toggletip.addEventListener('keydown', function (e) {
      if ((e.keyCode || e.which) === 27)
        liveRegion.innerHTML = '';
      });
      // Remove on blur
      toggletip.addEventListener('blur', function (e) {
        liveRegion.innerHTML = '';
      });
    });
  });
})(jQuery);

Note: I know absolutely nothing about AJAX other than it seems to be what's updating the fields's HTML.

0

Would this have something to do with Drupal 8's AJAX updating those fields?

Yes, you need to add

Drupal.behaviors

In order for your Drupal JS code to be able to run after AJAX.

using the functionality of Drupal.behaviors and once(). If used properly this will ensure that your code runs both on normal page loads and when data is loaded by AJAX (or BigPipe!)

Any object defined as a property of Drupal.behaviors will get its attach() method called when the DOM has loaded both initially and after any AJAX calls.

I suggest you read the Javascript API Overview.


Alternatively, If you don't want to use Drupal.behaviors, I believe if you change all the .addEventListener to .on that will also do.

1
  • Thank you so much, @no-sssweat! This worked perfectly. – Sarah C Oct 24 '18 at 16:11

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.