Is the AJAX from image fields and multi-line fields breaking my JavaScript? 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 = '&lt;span class="alert alert-info isu-alert_sm isu-tooltip-bubble"&gt;'+ message +'&lt;/span&gt;';
        }, 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.
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.