warrentyexpired/ModernUO
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

fix: Fixes commands.html tooltip (#1670)

Browse source
This commit is contained in:
Kamron Batman 2024-02-10 01:28:55 -08:00 • committed by GitHub
parent fffda53263
commit ac61b22f4b
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
2 changed files with 42 additions and 10 deletions
Download patch file Download diff file Expand all files Collapse all files

52
Distribution/Data/commands.html
View file

@ -353,7 +353,7 @@
</div>
</div>
<!-- Toolip -->
<div id="tooltip" class="absolute p-2 bg-modern-black text-white rounded-md shadow-lg max-w-lg hidden"></div>
<div id="tooltip" class="absolute p-2 bg-modern-black text-white rounded-md shadow-lg max-w-xs md:max-w-sm lg:max-w-md xl:max-w-lg hidden"></div>
<span id="commands" style="display:none; visibility: hidden">
<!-- COMMANDS -->
</span>
@ -429,7 +429,7 @@
tabData.forEach(item => {
table += `
<tr class="border-b">
<td class="px-4 py-4 text-sm font-medium text-gold-500 w-1/4 "><p>${item.name}</p></td>
<td class="px-4 py-4 text-sm font-medium text-gold-500 w-1/4"><p>${item.name}</p></td>
<td class="text-sm text-gold-900 px-6 py-4">
`;
@ -508,11 +508,47 @@
// Function to show the tooltip
function showTooltip(event, content) {
const tooltip = document.getElementById("tooltip");
const tooltip = document.getElementById('tooltip');
tooltip.innerHTML = content;
tooltip.style.left = `${event.pageX + 15}px`;
tooltip.style.top = `${event.pageY + 15}px`;
tooltip.classList.remove("hidden");
// Make it visible to the DOM so we can get size calculations
tooltip.style.visibility = 'hidden';
tooltip.classList.remove('hidden');
const srcRect = event.target.getBoundingClientRect();
// Calculate the size of the tooltip for positioning
const tooltipRect = tooltip.getBoundingClientRect();
const offset = 20; // Offset from the cursor for the tooltip
const startX = window.scrollX + srcRect.x;
const startY = window.scrollY + srcRect.y;
// Initial horizontal position (with viewport width check for side overflow)
let leftPosition = startX + offset;
if (leftPosition + tooltipRect.width > document.documentElement.clientWidth) {
leftPosition = document.documentElement.clientWidth - tooltipRect.width - offset;
}
// Determine vertical position based on available space
let topPosition;
const spaceAbove = startY - window.scrollY;
const spaceBelow = window.innerHeight - spaceAbove;
// Check if there's enough space below the cursor; otherwise, flip above
if (spaceBelow > tooltipRect.height + offset) {
topPosition = startY + offset;
} else if (spaceAbove > tooltipRect.height + offset) {
topPosition = startY - tooltipRect.height - offset;
} else {
// If neither above nor below has enough space, default to below and adjust to within viewport
topPosition = Math.max(window.scrollY + offset, startY - (tooltipRect.height / 2));
}
// Apply the calculated positions
tooltip.style.left = `${leftPosition}px`;
tooltip.style.top = `${topPosition}px`;
tooltip.style.visibility = 'visible';
}
// Function to hide the tooltip
@ -521,10 +557,6 @@
tooltip.classList.add("hidden");
}
const escapeHtml = (unsafe) => {
return unsafe.replaceAll("&", "&amp;").replaceAll("<", "&lt;").replaceAll(">", "&gt;").replaceAll("\"", "&quot;").replaceAll("'", "&#039;");
}
initTabs();
</script>
</body>