kibi/f0ckm
1
0
Fork 0
Code Issues 3 Pull Requests Actions Packages Projects Releases Wiki Activity

fix tooltip breakout calculation position

Browse Source
This commit is contained in:
Kibi Kelburton
2026-05-24 22:08:26 +02:00
parent b2584763ee
commit 8a679c2fe6
2 changed files with 16 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
public/s/css/f0ckm.css
View File

@@ -10234,20 +10234,19 @@ body.layout-modern>.pagewrapper:not(:has(.index-layout-wrapper)):not(:has(.item-
#f0ck-breakout-tooltip[data-flow="up"]::before, #f0ck-breakout-tooltip[data-flow="up"]::before,
#f0ck-breakout-tooltip[data-flow="up-left"]::before { #f0ck-breakout-tooltip[data-flow="up-left"]::before {
top: 100%; top: 100%;
left: 50%; left: var(--arrow-left, 50%);
transform: translateX(-50%); transform: translateX(-50%);
border-top-color: #535050; border-top-color: #535050;
border-bottom-width: 0; border-bottom-width: 0;
} }
#f0ck-breakout-tooltip[data-flow="up-left"]::before { #f0ck-breakout-tooltip[data-flow="up-left"]::before {
left: 10px; /* arrow-left is now computed dynamically; no override needed */
transform: none;
} }
#f0ck-breakout-tooltip[data-flow="down"]::before { #f0ck-breakout-tooltip[data-flow="down"]::before {
bottom: 100%; bottom: 100%;
left: 50%; left: var(--arrow-left, 50%);
transform: translateX(-50%); transform: translateX(-50%);
border-bottom-color: var(--tooltip-bg, #131212); border-bottom-color: var(--tooltip-bg, #131212);
border-top-width: 0; border-top-width: 0;

15
public/s/js/f0ckm.js
View File

@@ -7714,8 +7714,19 @@ document.addEventListener('DOMContentLoaded', () => {
} }
// Final clamp to screen // Final clamp to screen
breakoutTooltip.style.top = Math.max(5, Math.min(top, window.innerHeight - bRect.height - 5)) + 'px'; const clampedTop = Math.max(5, Math.min(top, window.innerHeight - bRect.height - 5));
breakoutTooltip.style.left = Math.max(5, Math.min(left, window.innerWidth - bRect.width - 5)) + 'px'; const clampedLeft = Math.max(5, Math.min(left, window.innerWidth - bRect.width - 5));
breakoutTooltip.style.top = clampedTop + 'px';
breakoutTooltip.style.left = clampedLeft + 'px';
// Point the arrow at the actual target center regardless of clamping
if (flow === 'up' || flow === 'up-left' || flow === 'down') {
const targetCenterX = rect.left + rect.width / 2;
const arrowLeft = Math.round(targetCenterX - clampedLeft);
// Keep the arrow within the tooltip bounds (with a small margin)
const arrowClamped = Math.max(8, Math.min(arrowLeft, bRect.width - 8));
breakoutTooltip.style.setProperty('--arrow-left', arrowClamped + 'px');
}
}; };
const showTooltipFor = (target) => { const showTooltipFor = (target) => {