diff --git a/webroot/js/utils.js b/webroot/js/utils.js index c7e9ca6..38d61c2 100644 --- a/webroot/js/utils.js +++ b/webroot/js/utils.js @@ -99,24 +99,23 @@ export function createTooltip() { } } -export function showTooltip(element, text) { +export function showTooltipAt(x, y, text) { createTooltip(); tooltip.innerHTML = text; tooltip.style.display = 'block'; - const rect = element.getBoundingClientRect(); const tooltipRect = tooltip.getBoundingClientRect(); + let left = x + 12; // offset from mouse pointer + let top = y + 12; - let left = rect.left + (rect.width / 2) - (tooltipRect.width / 2); - let top = rect.top - tooltipRect.height - 8; - - if (left < 10) left = 10; if (left + tooltipRect.width > window.innerWidth - 10) { left = window.innerWidth - tooltipRect.width - 10; } - if (top < 10) { - top = rect.bottom + 8; + if (top + tooltipRect.height > window.innerHeight - 10) { + top = y - tooltipRect.height - 12; } + if (left < 10) left = 10; + if (top < 10) top = 10; tooltip.style.left = left + 'px'; tooltip.style.top = top + 'px'; @@ -130,17 +129,19 @@ export function hideTooltip() { // Setup tooltip event listeners export function setupTooltips() { - document.addEventListener('mouseover', function (e) { + document.addEventListener('mousemove', function (e) { if (e.target.classList.contains('result-label')) { const formula = e.target.getAttribute('data-formula'); if (formula) { - showTooltip(e.target, `Formel: ${formula}`); + showTooltipAt(e.clientX, e.clientY, `Formel: ${formula}`); } } else if (e.target.classList.contains('result-value')) { const formula = e.target.getAttribute('data-result-formula'); if (formula && formula !== '') { - showTooltip(e.target, `Berechnung: ${formula}`); + showTooltipAt(e.clientX, e.clientY, `Berechnung: ${formula}`); } + } else { + hideTooltip(); } });