IBX-9600: Tooltips are not re-rendered (#1460)

Author: OstafinL

src/bundle/Resources/public/js/scripts/helpers/tooltips.helper.js

@@ -3,42 +3,44 @@ import { getBootstrap } from './context.helper';
 
 const { document: doc } = window;
 
-let lastInsertTooltipTarget = null;
 const TOOLTIPS_SELECTOR = '[title], [data-tooltip-title]';
 const observerConfig = {
     childList: true,
     subtree: true,
+    attributes: true,
+    attributeFilter: ['title', 'data-tooltip-title', 'data-tooltip-extra-class', 'data-tooltip-manual-reparsing'],
 };
 const resizeEllipsisObserver = new ResizeObserver((entries) => {
     entries.forEach((entry) => {
         parse(entry.target);
     });
 });
 const observer = new MutationObserver((mutationsList) => {
-    if (lastInsertTooltipTarget) {
-        mutationsList.forEach((mutation) => {
-            const { addedNodes, removedNodes } = mutation;
-
-            if (addedNodes.length) {
-                addedNodes.forEach((addedNode) => {
-                    if (addedNode instanceof Element) {
-                        parse(addedNode);
-                    }
-                });
+    mutationsList.forEach((mutation) => {
+        const { type, target, addedNodes, removedNodes } = mutation;
+
+        if (type === 'attributes') {
+            const { tooltipManualReparsing } = target.dataset;
+
+            if (!tooltipManualReparsing) {
+                parse(target.parentElement);
+            }
+        }
+
+        addedNodes.forEach((addedNode) => {
+            if (addedNode instanceof Element && !addedNode?.classList.contains('ibexa-tooltip')) {
+                parse(addedNode);
             }
+        });
 
-            if (removedNodes.length) {
-                removedNodes.forEach((removedNode) => {
-                    if (removedNode.classList && !removedNode.classList.contains('ibexa-tooltip')) {
-                        lastInsertTooltipTarget = null;
-                        doc.querySelectorAll('.ibexa-tooltip.show').forEach((tooltipNode) => {
-                            tooltipNode.remove();
-                        });
-                    }
+        removedNodes.forEach((removedNode) => {
+            if (removedNode.classList && !removedNode.classList.contains('ibexa-tooltip')) {
+                removedNode.querySelectorAll('.ibexa-tooltip.show').forEach((tooltipNode) => {
+                    tooltipNode.remove();
                 });
             }
         });
-    }
+    });
 });
 const modifyPopperConfig = (iframe, defaultBsPopperConfig) => {
     if (!iframe) {
@@ -146,10 +148,6 @@ const initializeTooltip = (tooltipNode, hasEllipsisStyle) => {
                    </div>`,
     });
 
-    tooltipNode.addEventListener('inserted.bs.tooltip', (event) => {
-        lastInsertTooltipTarget = event.currentTarget;
-    });
-
     if (isSafari()) {
         if (tooltipNode.children) {
             const childWithTitle = [...tooltipNode.children].find((child) => title === child.textContent);
@@ -169,6 +167,7 @@ const parse = (baseElement = doc) => {
     if (!baseElement) {
         return;
     }
+
     const bootstrap = getBootstrap();
     const tooltipNodes = [...baseElement.querySelectorAll(TOOLTIPS_SELECTOR)];