diff --git a/src/bundle/Resources/public/js/scripts/helpers/tooltips.helper.js b/src/bundle/Resources/public/js/scripts/helpers/tooltips.helper.js index 8215c584be..38006c8f3a 100644 --- a/src/bundle/Resources/public/js/scripts/helpers/tooltips.helper.js +++ b/src/bundle/Resources/public/js/scripts/helpers/tooltips.helper.js @@ -1,6 +1,6 @@ (function (global, doc, ibexa, bootstrap) { let lastInsertTooltipTarget = null; - const TOOLTIPS_SELECTOR = '[title]'; + const TOOLTIPS_SELECTOR = '[title], [data-tooltip-title]'; const observerConfig = { childList: true, subtree: true, @@ -93,7 +93,7 @@ return texHeight; }; const isTitleEllipsized = (node) => { - const title = node.title || node.dataset.originalTitle; + const title = node.dataset.originalTitle; const { width: nodeWidth, height: nodeHeight } = node.getBoundingClientRect(); const computedNodeStyles = getComputedStyle(node); const styles = { @@ -112,6 +112,37 @@ return textHeight > nodeHeight; }; + const initializeTooltip = (tooltipNode) => { + const delay = { + show: parseInt(tooltipNode.dataset.delayShow, 10) ?? 150, + hide: parseInt(tooltipNode.dataset.delayHide, 10) ?? 75, + }; + const extraClass = tooltipNode.dataset.tooltipExtraClass ?? ''; + const placement = tooltipNode.dataset.tooltipPlacement ?? 'bottom'; + const trigger = tooltipNode.dataset.tooltipTrigger ?? 'hover focus'; + const useHtml = tooltipNode.dataset.tooltipUseHtml !== undefined; + const container = tooltipNode.dataset.tooltipContainerSelector + ? tooltipNode.closest(tooltipNode.dataset.tooltipContainerSelector) + : 'body'; + const iframe = document.querySelector(tooltipNode.dataset.tooltipIframeSelector); + + new bootstrap.Tooltip(tooltipNode, { + delay, + placement, + trigger, + container, + popperConfig: modifyPopperConfig.bind(null, iframe), + html: useHtml, + template: `
+
+
+
`, + }); + + tooltipNode.addEventListener('inserted.bs.tooltip', (event) => { + lastInsertTooltipTarget = event.currentTarget; + }); + }; const parse = (baseElement = doc) => { if (!baseElement) { return; @@ -124,77 +155,46 @@ } for (const tooltipNode of tooltipNodes) { - if (tooltipNode.hasAttribute('title')) { - const hasEllipsisStyle = getComputedStyle(tooltipNode).textOverflow === 'ellipsis'; - - if (hasEllipsisStyle) { - resizeEllipsisObserver.observe(tooltipNode); - - const isEllipsized = isTitleEllipsized(tooltipNode); - const tooltipInstance = bootstrap.Tooltip.getInstance(tooltipNode); - - if (tooltipInstance) { - if (!isEllipsized) { - tooltipInstance.dispose(); - } - - continue; - } + const hasEllipsisStyle = getComputedStyle(tooltipNode).textOverflow === 'ellipsis'; + const hasNewTitle = tooltipNode.hasAttribute('title'); + const tooltipInitialized = !!tooltipNode.dataset.originalTitle; + let shouldHaveTooltip = !hasEllipsisStyle; - if (isEllipsized) { - if (tooltipNode.dataset.title) { - tooltipNode.title = tooltipNode.dataset.title; - } - } else { - if (tooltipNode.title) { - tooltipNode.dataset.title = tooltipNode.title; - tooltipNode.title = ''; - } + if (!tooltipInitialized && hasNewTitle) { + resizeEllipsisObserver.observe(tooltipNode); + tooltipNode.dataset.originalTitle = tooltipNode.title; - continue; - } + if (!shouldHaveTooltip) { + shouldHaveTooltip = isTitleEllipsized(tooltipNode); } - const delay = { - show: parseInt(tooltipNode.dataset.delayShow, 10) ?? 150, - hide: parseInt(tooltipNode.dataset.delayHide, 10) ?? 75, - }; - const extraClass = tooltipNode.dataset.tooltipExtraClass ?? ''; - const placement = tooltipNode.dataset.tooltipPlacement ?? 'bottom'; - const trigger = tooltipNode.dataset.tooltipTrigger ?? 'hover focus'; - const useHtml = tooltipNode.dataset.tooltipUseHtml !== undefined; - const container = tooltipNode.dataset.tooltipContainerSelector - ? tooltipNode.closest(tooltipNode.dataset.tooltipContainerSelector) - : 'body'; - const iframe = document.querySelector(tooltipNode.dataset.tooltipIframeSelector); + if (shouldHaveTooltip) { + initializeTooltip(tooltipNode); + } else { + tooltipNode.removeAttribute('title'); + } + } else if (tooltipInitialized && (hasNewTitle || hasEllipsisStyle)) { + if (hasNewTitle) { + tooltipNode.dataset.originalTitle = tooltipNode.title; + } const tooltipInstance = bootstrap.Tooltip.getInstance(tooltipNode); + const hasTooltip = !!tooltipInstance; - if (tooltipInstance) { - tooltipNode.title = tooltipInstance._getTitle(); + if (!shouldHaveTooltip) { + shouldHaveTooltip = isTitleEllipsized(tooltipNode); + } + if (hasTooltip && ((hasNewTitle && shouldHaveTooltip) || !shouldHaveTooltip)) { tooltipInstance.dispose(); } - tooltipNode.dataset.originalTitle = tooltipNode.title; + if (shouldHaveTooltip && (hasNewTitle || !hasTooltip)) { + tooltipNode.title = tooltipNode.dataset.originalTitle; - new bootstrap.Tooltip(tooltipNode, { - delay, - placement, - trigger, - container, - popperConfig: modifyPopperConfig.bind(null, iframe), - html: useHtml, - template: `
-
-
-
`, - }); - - tooltipNode.title = ''; - - tooltipNode.addEventListener('inserted.bs.tooltip', (event) => { - lastInsertTooltipTarget = event.currentTarget; - }); + initializeTooltip(tooltipNode); + } else { + tooltipNode.removeAttribute('title'); + } } } };