public/eberron-quest-board
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix faction details that get cutoff

Browse Source
This commit is contained in:
Thomas 2026-01-24 23:51:20 -05:00
parent 68232403d3
commit 49754b1394
2 changed files with 37 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

35
app.js
View File

@ -797,6 +797,41 @@ function toggleBenefitsTooltip(event) {
// Toggle this tooltip
tooltip.classList.toggle('show');
if (tooltip.classList.contains('show')) {
positionBenefitsTooltip(tooltip, icon);
}
}
function positionBenefitsTooltip(tooltip, icon) {
const margin = 12;
const maxWidth = Math.min(400, window.innerWidth - margin * 2);
tooltip.style.width = `${maxWidth}px`;
tooltip.style.left = '50%';
tooltip.style.right = 'auto';
tooltip.style.transform = 'translateX(-50%)';
let tooltipRect = tooltip.getBoundingClientRect();
const iconRect = icon.getBoundingClientRect();
const viewportWidth = window.innerWidth;
if (tooltipRect.right > viewportWidth - margin) {
const shiftLeft = tooltipRect.right - (viewportWidth - margin);
tooltip.style.transform = `translateX(calc(-50% - ${shiftLeft}px))`;
} else if (tooltipRect.left < margin) {
const shiftRight = margin - tooltipRect.left;
tooltip.style.transform = `translateX(calc(-50% + ${shiftRight}px))`;
}
// Re-measure after shifting and align arrow to icon center
tooltipRect = tooltip.getBoundingClientRect();
const iconCenter = iconRect.left + iconRect.width / 2;
const arrowLeft = Math.min(
Math.max(iconCenter - tooltipRect.left, 16),
tooltipRect.width - 16
);
tooltip.style.setProperty('--tooltip-arrow-left', `${arrowLeft}px`);
}
// Close tooltips when clicking outside

4
styles.css
View File

@ -440,7 +440,7 @@ body {
content: '';
position: absolute;
bottom: 100%;
left: 50%;
left: var(--tooltip-arrow-left, 50%);
transform: translateX(-50%);
border: 8px solid transparent;
border-bottom-color: #8b4513;
@ -450,7 +450,7 @@ body {
content: '';
position: absolute;
bottom: 100%;
left: 50%;
left: var(--tooltip-arrow-left, 50%);
transform: translateX(-50%);
border: 6px solid transparent;
border-bottom-color: #fff;