luci-base: luci.js: emit custom events for tooltip open/close actions

The new `tooltip-open` and `tooltip-close` events allow other code to hook
into the tooltip div rendering, e.g. to populate it with custom markup.

Also ignore tooltip events originating from descendant elements while
we're at it.

Signed-off-by: Jo-Philipp Wich <jo@mein.io>

diff --git a/modules/luci-base/htdocs/luci-static/resources/luci.js b/modules/luci-base/htdocs/luci-static/resources/luci.js
index 04c460182fbd40af6488eb84dd530737cf68a4b7..c1c1b0dd3c238f871de27222e5e8253b41f223cc 100644 (file)
--- a/modules/luci-base/htdocs/luci-static/resources/luci.js
+++ b/modules/luci-base/htdocs/luci-static/resources/luci.js
@@ -129,10 +129,16 @@
                        tooltipDiv.style.top = y + 'px';
                        tooltipDiv.style.left = x + 'px';
                        tooltipDiv.style.opacity = 1;
+
+                       tooltipDiv.dispatchEvent(new CustomEvent('tooltip-open', {
+                               bubbles: true,
+                               detail: { target: target }
+                       }));
                },
 
                hideTooltip: function(ev) {
-                       if (ev.target === tooltipDiv || ev.relatedTarget === tooltipDiv)
+                       if (ev.target === tooltipDiv || ev.relatedTarget === tooltipDiv ||
+                           tooltipDiv.contains(ev.target) || tooltipDiv.contains(ev.relatedTarget))
                                return;
 
                        if (tooltipTimeout !== null) {
@@ -142,6 +148,8 @@
 
                        tooltipDiv.style.opacity = 0;
                        tooltipTimeout = window.setTimeout(function() { tooltipDiv.removeAttribute('style'); }, 250);
+
+                       tooltipDiv.dispatchEvent(new CustomEvent('tooltip-close', { bubbles: true }));
                },