Difuse/luci
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

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

Browse source 
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>
This commit is contained in:
Jo-Philipp Wich 2018-11-05 16:48:10 +01:00
parent b468e1416d
commit bbb800556d
1 changed files with 8 additions and 6 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

14
modules/luci-base/htdocs/luci-static/resources/cbi.js
View file

@ -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);
}