Use mutation observer to automatically apply tooltips on new elements with [title]. Close #97. Closes #98.

Author: knadh

src/js/tooltip.js

@@ -5,14 +5,32 @@
  */
 
 document.addEventListener('DOMContentLoaded', () => {
-  document.querySelectorAll('[title]').forEach(el => {
-    const text = el.getAttribute('title');
-    if (text) {
-      el.setAttribute('data-tooltip', text);
-      if (!el.hasAttribute('aria-label')) {
-        el.setAttribute('aria-label', text);
-      }
-      el.removeAttribute('title');
+  const _attrib = 'title', _sel = '[title]';
+  const apply = el => {
+    const t = el.getAttribute(_attrib);
+    if (!t) return;
+    el.setAttribute('data-tooltip', t);
+    el.hasAttribute('aria-label') || el.setAttribute('aria-label', t);
+
+    // Kill the original 'title'.
+    el.removeAttribute(_attrib);
+  };
+
+  // Apply to all elements on load.
+  document.querySelectorAll(_sel).forEach(apply);
+
+  // Apply to new elements.
+  new MutationObserver(muts => {
+    for (const m of muts) {
+      apply(m.target);
+
+      for (const n of m.addedNodes)
+        if (n.nodeType === 1) {
+          apply(n);
+          n.querySelectorAll(_sel).forEach(apply);
+        }
     }
+  }).observe(document.body, {
+    childList: true, subtree: true, attributes: true, attributeFilter: [_attrib]
   });
 });