Sindbad~EG File Manager

// showTooltip and hideTooltip are declared in a "global scope",
// outside any function, so they can be used later to apply to 
// dynamically created buttons in GraphDoc.php
const tooltipContainer = document.getElementById('tooltip-container'); // Ensure tooltipContainer is defined

let tooltipTimeout; // Store the timeout ID for the tooltip delay


function showTooltip(event) { 
	// First validate that the mouse is still over the button
	// Without this, if you pass over a button quickly, the tooltip doesn't disappear.
	if (!event.target.matches(':hover')) {
		// console.log("Mouse left before tooltip was displayed.");
		return; // Exit if the button is no longer hovered
	}
	// console.log("in showTooltip with ", event.target.id)
	const buttonId = event.target.id;
	if(buttonId.includes("Ref"))
		return;
	const tooltipId = `tooltip-${buttonId}`;
	const svgElement = document.getElementById(tooltipId); 
	if(svgElement == null){ 
		console.log("Error, no tooltip for ", buttonId); 
		console.log("That is, no element with id ", tooltipId); 
		return;
	}
	
	const copy  = svgElement.cloneNode(true); // Clone the SVG element
	copy.style.display = "block";
   const itemWidth = parseInt(copy.getAttribute('width'));
   const itemHeight = parseInt(copy.getAttribute('height'));
	
	// Clear the previous content of the tooltipContainer
	while (tooltipContainer.firstChild) {
		tooltipContainer.firstChild.style.display = "none";
		tooltipContainer.removeChild(tooltipContainer.firstChild);
	}
	
	tooltipContainer.style.display = "block";
	tooltipContainer.style.border = "none";
	tooltipContainer.style.padding = "0px";
	tooltipContainer.style.width = `${itemWidth}px`;
	tooltipContainer.style.height = `${itemHeight}px`;
	tooltipContainer.style.position = 'absolute';
	const rect = event.target.getBoundingClientRect();
	let tooltipGap = 5; // Default spacing for normal elements
	// ✅ Detect if the target is a slider (input[type="range"])
	if (event.target.tagName === "INPUT" && event.target.type === "range") {
		console.log("Tooltip target is a slider. Increasing spacing to prevent flicker.");
		tooltipGap = 12; // More spacing for sliders to avoid flicker
	}
	let possibletop = rect.bottom + tooltipGap; // Ensure tooltip doesn't overlap the target
	tooltipContainer.style.left = `${rect.left + rect.width/2}px`; 
	tooltipContainer.style.top = `${possibletop}px`;   
	tooltipContainer.appendChild(copy);
}

function hideTooltip(event) {
	clearTimeout(tooltipTimeout); // Clear the tooltip delay if the mouse leaves early
	tooltipContainer.style.display = 'none'; 
}

document.addEventListener('DOMContentLoaded', function() {
	  // console.log("Tooltips.js is running, DOM fully loaded");
	const tooltipButtons = document.querySelectorAll('.svg-button, .selector, .menuitem, .selectMenuItemWrapper, .selectmenuitem, .tooltipListener');
	tooltipButtons.forEach(button => {
			// console.log("Checking button:", button.id);
			if(button.style.display != "none"){
				button.addEventListener('mouseenter', (event) => {
					// Set a timeout to delay showing the tooltip
					// But only set a timeout if the button's id does not end in "Ref"
					if (button.id.endsWith("Ref")) {
						return; // Skip setting the timer for reference buttons
					}
					tooltipTimeout = setTimeout(() => showTooltip(event), 700); // delay in milliseconds
				});
				button.addEventListener('mouseleave', hideTooltip);
			}
		
	}); 
});