luci-base: cbi.js: properly handle cbi tooltips on nested elements

Rework the tooltip event delegation logic to prevent hiding the tooltop
when the cursor is moved to a children of the tooltip container element.

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

diff --git a/modules/luci-base/htdocs/luci-static/resources/cbi.js b/modules/luci-base/htdocs/luci-static/resources/cbi.js
index 9b391c7827c8df3f19b5bbb500c0aa8bf0fd11a4..3351cc8e94df198f6f734b589f5da13c09513be1 100644 (file)
--- a/modules/luci-base/htdocs/luci-static/resources/cbi.js
+++ b/modules/luci-base/htdocs/luci-static/resources/cbi.js
@@ -2207,7 +2207,9 @@ function cbi_update_table(table, data, placeholder) {
 var tooltipDiv = null, tooltipTimeout = null;
 
 function showTooltip(ev) {
-       if (!matchesElem(ev.target, '[data-tooltip]'))
+       var target = findParent(ev.target, '[data-tooltip]');
+
+       if (!target)
                return;
 
        if (tooltipTimeout !== null) {
@@ -2215,19 +2217,19 @@ function showTooltip(ev) {
                tooltipTimeout = null;
        }
 
-       var rect = ev.target.getBoundingClientRect(),
+       var rect = target.getBoundingClientRect(),
            x = rect.left              + window.pageXOffset,
            y = rect.top + rect.height + window.pageYOffset;
 
        tooltipDiv.className = 'cbi-tooltip';
        tooltipDiv.innerHTML = '▲ ';
-       tooltipDiv.firstChild.data += ev.target.getAttribute('data-tooltip');
+       tooltipDiv.firstChild.data += target.getAttribute('data-tooltip');
 
-       if (ev.target.hasAttribute('data-tooltip-style'))
-               tooltipDiv.classList.add(ev.target.getAttribute('data-tooltip-style'));
+       if (target.hasAttribute('data-tooltip-style'))
+               tooltipDiv.classList.add(target.getAttribute('data-tooltip-style'));
 
        if ((y + tooltipDiv.offsetHeight) > (window.innerHeight + window.pageYOffset)) {
-               y -= (tooltipDiv.offsetHeight + ev.target.offsetHeight);
+               y -= (tooltipDiv.offsetHeight + target.offsetHeight);
                tooltipDiv.firstChild.data = '▼ ' + tooltipDiv.firstChild.data.substr(2);
        }