Mirrors/Stirling-PDF
Mirrors/Stirling-PDF
1
0
Fork 0
mirror of https://github.com/Frooodle/Stirling-PDF.git synced 2025-08-11 13:48:37 +02:00
Code Issues Packages Projects Releases Wiki Activity

refactor: use global tooltip element, that is updated based on mouse position

Browse Source
This commit is contained in:
Lukas 2025-08-07 14:13:42 +02:00
parent bb8edffaab
commit 72a4e0f6d3
No known key found for this signature in database
1 changed files with 34 additions and 27 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

61
app/core/src/main/resources/static/js/navbar.js
View File

@ -75,39 +75,46 @@ function setupDropdowns() {
}); });
} }
window.tooltipSetup = () => { function tooltipSetup() {
const tooltipElements = document.querySelectorAll('[title]'); // initialize global tooltip element or get reference
let customTooltip = document.getElementById("customTooltip");
if (!customTooltip) {
customTooltip = document.createElement("div");
customTooltip.id = "customTooltip";
customTooltip.className = "btn-tooltip";
document.body.appendChild(customTooltip);
}
function updateTooltipPosition(event, text) {
if (window.innerWidth >= 1200) {
customTooltip.textContent = text;
customTooltip.style.display = "block";
customTooltip.style.left = `${event.pageX + 10}px`;
customTooltip.style.top = `${event.pageY + 10}px`;
}
}
function hideTooltip() {
customTooltip.style.display = "none";
}
// find uninitialized tooltips and set up event listeners
const tooltipElements = document.querySelectorAll("[title]");
tooltipElements.forEach((element) => { tooltipElements.forEach((element) => {
const tooltipText = element.getAttribute('title'); const tooltipText = element.getAttribute("title");
element.removeAttribute('title'); element.removeAttribute("title");
element.setAttribute('data-title', tooltipText); element.setAttribute("data-title", tooltipText); // no UI effect, just for reference
const customTooltip = document.createElement('div');
customTooltip.className = 'btn-tooltip';
customTooltip.textContent = tooltipText;
document.body.appendChild(customTooltip); element.addEventListener("mouseenter", (event) => updateTooltipPosition(event, tooltipText));
element.addEventListener("mousemove", (event) => updateTooltipPosition(event, tooltipText));
element.addEventListener("mouseleave", hideTooltip);
element.addEventListener('mouseenter', (event) => { // in case UI moves and mouseleave is not triggered, tooltip is readded when mouse is moved over the element
if (window.innerWidth >= 1200) { element.addEventListener("click", hideTooltip);
customTooltip.style.display = 'block';
customTooltip.style.left = `${event.pageX + 10}px`;
customTooltip.style.top = `${event.pageY + 10}px`;
}
});
element.addEventListener('mousemove', (event) => {
if (window.innerWidth >= 1200) {
customTooltip.style.left = `${event.pageX + 10}px`;
customTooltip.style.top = `${event.pageY + 10}px`;
}
});
element.addEventListener('mouseleave', () => {
customTooltip.style.display = 'none';
});
}); });
}; };
window.tooltipSetup = tooltipSetup;
// Override the bootstrap dropdown styles for mobile // Override the bootstrap dropdown styles for mobile
function fixNavbarDropdownStyles() { function fixNavbarDropdownStyles() {