diff --git a/war/src/main/js/components/tooltips/index.js b/war/src/main/js/components/tooltips/index.js
index 88233044c65d..90792b240a30 100644
--- a/war/src/main/js/components/tooltips/index.js
+++ b/war/src/main/js/components/tooltips/index.js
@@ -8,79 +8,59 @@ const TOOLTIP_BASE = {
appendTo: document.body,
};
-let tooltipInstances = [];
-const globalPlugin = {
- fn(instance) {
- return {
- onCreate() {
- tooltipInstances = tooltipInstances.concat(instance);
- },
- onDestroy() {
- tooltipInstances = tooltipInstances.filter((i) => i !== instance);
- },
- };
- },
-};
-
-tippy.setDefaultProps({
- plugins: [globalPlugin],
-});
-
/**
- * Registers tooltips for the page
- * If called again, destroys existing tooltips and registers them again (useful for progressive rendering)
- * @param {HTMLElement} container - Registers the tooltips for the given container
+ * Registers tooltips for the given element
+ * If called again, destroys any existing tooltip for the element and
+ * registers them again (useful for progressive rendering)
+ * @param {HTMLElement} element - Registers the tooltips for the given element
*/
-function registerTooltips(container) {
- if (!container) {
- container = document;
+function registerTooltip(element) {
+ if (element._tippy) {
+ element._tippy.destroy();
}
- tooltipInstances.forEach((instance) => {
- if (instance.props.container === container) {
- instance.destroy();
- }
- });
-
- tippy(
- container.querySelectorAll(
- '[tooltip]:not([tooltip=""]):not([data-html-tooltip])'
- ),
- Object.assign(
- {
- content: (element) =>
- element.getAttribute("tooltip").replace(/
|\\n/g, "\n"),
- container: container,
- onCreate(instance) {
- instance.reference.setAttribute("title", instance.props.content);
- },
- onShow(instance) {
- instance.reference.removeAttribute("title");
- },
- onHidden(instance) {
- instance.reference.setAttribute("title", instance.props.content);
+ if (
+ element.hasAttribute("tooltip") &&
+ !element.hasAttribute("data-html-tooltip")
+ ) {
+ tippy(
+ element,
+ Object.assign(
+ {
+ content: (element) =>
+ element.getAttribute("tooltip").replace(/
|\\n/g, "\n"),
+ onCreate(instance) {
+ instance.reference.setAttribute("title", instance.props.content);
+ },
+ onShow(instance) {
+ instance.reference.removeAttribute("title");
+ },
+ onHidden(instance) {
+ instance.reference.setAttribute("title", instance.props.content);
+ },
},
- },
- TOOLTIP_BASE
- )
- );
+ TOOLTIP_BASE
+ )
+ );
+ }
- tippy(
- container.querySelectorAll("[data-html-tooltip]"),
- Object.assign(
- {
- content: (element) => element.getAttribute("data-html-tooltip"),
- allowHTML: true,
- container: container,
- onCreate(instance) {
- instance.props.interactive =
- instance.reference.getAttribute("data-tooltip-interactive") ===
- "true";
+ if (element.hasAttribute("data-html-tooltip")) {
+ tippy(
+ element,
+ Object.assign(
+ {
+ content: (element) => element.getAttribute("data-html-tooltip"),
+ allowHTML: true,
+ onCreate(instance) {
+ instance.props.interactive =
+ instance.reference.getAttribute("data-tooltip-interactive") ===
+ "true";
+ },
},
- },
- TOOLTIP_BASE
- )
- );
+ TOOLTIP_BASE
+ )
+ );
+ }
}
/**
@@ -113,8 +93,8 @@ function init() {
"[tooltip], [data-html-tooltip]",
"-tooltip-",
1000,
- function () {
- registerTooltips(null);
+ (element) => {
+ registerTooltip(element);
}
);