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');
+ }
}
}
};