From bbb800556d89f3e1e98c66b7e31f996ed09128c0 Mon Sep 17 00:00:00 2001 From: Jo-Philipp Wich Date: Mon, 5 Nov 2018 16:48:10 +0100 Subject: 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 --- modules/luci-base/htdocs/luci-static/resources/cbi.js | 14 ++++++++------ 1 file changed, 8 insertions(+), 6 deletions(-) (limited to 'modules') diff --git a/modules/luci-base/htdocs/luci-static/resources/cbi.js b/modules/luci-base/htdocs/luci-static/resources/cbi.js index 9b391c782..3351cc8e9 100644 --- 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); } -- cgit v1.2.3