mckinley/Marketing-Intgelligence
1
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Switch correction callout from hover to click-to-open popup

Browse Source 
Hover tooltips (native title attribute) are unreliable on small
icons and inconsistent with this dashboard's existing info-popup
pattern (click to open, click outside to close, e.g. the "What is
a vertical?" tips). Added toggleTipEl() as a companion to the
existing id-based toggleTip() for dynamically created elements,
and rebuilt the correction badge as a positioned popup using it.
Verified end-to-end with a real DOM (jsdom): click opens the tip,
click again or click outside closes it.
This commit is contained in:
beantownbabe committed 2026-08-22 11:02:37 +02:00
1 parent 2cb0319cbb
commit 441c3e7936
1 file changed
+21 -3
Download Patch File Download Diff File Expand all files Collapse all files
index.html
+21 -3
View File
@@ -1055,6 +1055,14 @@ function toggleTip(id) {
setTimeout(function(){ document.addEventListener('click', closeTip); }, 0);
}
}
function toggleTipEl(el) {
var isOpen = el.style.display !== 'none';
el.style.display = isOpen ? 'none' : 'block';
if (!isOpen) {
function closeTip(e) { if (!el.contains(e.target)) { el.style.display = 'none'; document.removeEventListener('click', closeTip); } }
setTimeout(function () { document.addEventListener('click', closeTip); }, 0);
}
}
function toggleEdit(btn) {
var main = document.querySelector('.main');
var on = main.getAttribute('contenteditable') === 'true';
@@ -1330,11 +1338,21 @@ function renderProspectScout() {
topRow.appendChild(badge);
}
if (c.correction) {
var corrWrap = document.createElement('span');
corrWrap.style.position = 'relative';
corrWrap.style.display = 'inline-flex';
var corrBadge = document.createElement('span');
corrBadge.textContent = '?';
corrBadge.title = c.correction;
corrBadge.style.cssText = 'display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;min-width:18px;border-radius:50%;background:var(--yellow);color:var(--txt);font-size:11px;font-weight:800;cursor:help;flex-shrink:0;';
topRow.appendChild(corrBadge);
corrBadge.style.cssText = 'display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;min-width:18px;border-radius:50%;background:var(--yellow);color:var(--txt);font-size:11px;font-weight:800;cursor:pointer;flex-shrink:0;';
var corrTip = document.createElement('div');
corrTip.style.cssText = 'display:none;position:absolute;top:100%;right:0;z-index:100;margin-top:8px;width:240px;text-align:left;background:var(--surface);border:1px solid var(--border);border-left:4px solid var(--yellow);border-radius:8px;padding:12px 14px;box-shadow:0 4px 16px rgba(26,78,122,0.18);font-size:12px;color:var(--txt-s);line-height:1.5;font-weight:400;';
corrTip.textContent = c.correction;
corrBadge.addEventListener('click', function (tip) {
return function (e) { e.stopPropagation(); toggleTipEl(tip); };
}(corrTip));
corrWrap.appendChild(corrBadge);
corrWrap.appendChild(corrTip);
topRow.appendChild(corrWrap);
}
card.appendChild(topRow);
}