IBX-4277: [UDW] Tooltips from left menu aren't visible (#642)

ibexa · Dec 1, 2022 · 5f8f391 · 5f8f391
1 parent 5cf6727
commit 5f8f391
Show file tree

Hide file tree

Showing 4 changed files with 22 additions and 5 deletions.
diff --git a/src/bundle/Resources/public/js/scripts/core/custom.tooltip.js b/src/bundle/Resources/public/js/scripts/core/custom.tooltip.js
@@ -1,3 +1,4 @@
 (function (global, doc, ibexa) {
     ibexa.helpers.tooltips.parse();
+    ibexa.helpers.tooltips.observe();
 })(window, window.document, window.ibexa);
diff --git a/src/bundle/Resources/public/js/scripts/helpers/tooltips.helper.js b/src/bundle/Resources/public/js/scripts/helpers/tooltips.helper.js
@@ -13,7 +13,15 @@
     const observer = new MutationObserver((mutationsList) => {
         if (lastInsertTooltipTarget) {
             mutationsList.forEach((mutation) => {
-                const { removedNodes } = mutation;
+                const { addedNodes, removedNodes } = mutation;
+
+                if (addedNodes.length) {
+                    addedNodes.forEach((addedNode) => {
+                        if (addedNode instanceof Element) {
+                            parse(addedNode);
+                        }
+                    });
+                }
 
                 if (removedNodes.length) {
                     removedNodes.forEach((removedNode) => {
@@ -159,11 +167,13 @@
             bootstrap.Tooltip.getOrCreateInstance(tooltipNode).hide();
         }
     };
-
-    observer.observe(doc.querySelector('body'), observerConfig);
+    const observe = (baseElement = doc) => {
+        observer.observe(baseElement, observerConfig);
+    };
 
     ibexa.addConfig('helpers.tooltips', {
         parse,
         hideAll,
+        observe,
     });
 })(window, window.document, window.ibexa, window.bootstrap);
diff --git a/src/bundle/ui-dev/src/modules/universal-discovery/components/tab-selector/tab.selector.js b/src/bundle/ui-dev/src/modules/universal-discovery/components/tab-selector/tab.selector.js
@@ -35,7 +35,13 @@ const TabSelector = () => {
                 });
 
                 return (
-                    <div className={className} key={tab.id} onClick={onClick} title={tab.label}>
+                    <div
+                        className={className}
+                        key={tab.id}
+                        onClick={onClick}
+                        title={tab.label}
+                        data-tooltip-container-selector=".c-udw-tab"
+                    >
                         <Icon customPath={tab.icon} extraClasses="ibexa-icon--small-medium" />
                     </div>
                 );

diff --git a/src/lib/Behat/Component/UniversalDiscoveryWidget.php b/src/lib/Behat/Component/UniversalDiscoveryWidget.php
@@ -136,7 +136,7 @@ public function changeTab($tabName): void
         $this->getHTMLPage()->findAll($this->getLocator('categoryTabSelector'))
              ->getByCriterion(new ElementAttributeCriterion('data-original-title', $tabName))->click();
         $this->getHTMLPage()->findAll($this->getLocator('selectedTab'))
-             ->getByCriterion(new ElementAttributeCriterion('title', $tabName))->assert()->isVisible();
+             ->getByCriterion(new ElementAttributeCriterion('data-bs-original-title', $tabName))->assert()->isVisible();
     }
 
     public function selectBookmark(string $bookmarkName): void