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 = () => {
const tooltipElements = document.querySelectorAll('[title]');
function tooltipSetup() {
// 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) => {
const tooltipText = element.getAttribute('title');
element.removeAttribute('title');
element.setAttribute('data-title', tooltipText);
const customTooltip = document.createElement('div');
customTooltip.className = 'btn-tooltip';
customTooltip.textContent = tooltipText;
const tooltipText = element.getAttribute("title");
element.removeAttribute("title");
element.setAttribute("data-title", tooltipText); // no UI effect, just for reference
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) => {
if (window.innerWidth >= 1200) {
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';
});
// in case UI moves and mouseleave is not triggered, tooltip is readded when mouse is moved over the element
element.addEventListener("click", hideTooltip);
});
};
window.tooltipSetup = tooltipSetup;
// Override the bootstrap dropdown styles for mobile
function fixNavbarDropdownStyles() {