80e2df5450
The tooltip clamped its centre to a fixed 92px margin, but the caption is up to 240px wide (120px half), so a left-edge anchor (e.g. the nav-rail counts icon at x~40) pushed the centred box ~28px off the left of the viewport. Clamp with the caption's max half-width so it can't overflow on first paint, then a useLayoutEffect re-centres on the anchor using its actual width. Verified: the nav-rail counts tooltip now sits fully on-screen.
94 lines
3.3 KiB
TypeScript
94 lines
3.3 KiB
TypeScript
import { useLayoutEffect, useRef, useState, useSyncExternalStore } from "react";
|
|
import { createPortal } from "react-dom";
|
|
import { hintsEnabled, subscribeHints } from "../lib/hints";
|
|
|
|
type Side = "top" | "bottom";
|
|
type Coords = { left: number; top: number; placement: Side };
|
|
|
|
const MARGIN = 8;
|
|
const MAX_HALF = 120; // half of the tooltip's max-w-[240px] — the widest it can get
|
|
|
|
/** Wrap any element to show a short glass hint caption on hover — but only while the
|
|
* app-wide hints toggle (Settings → Appearance) is on. Rendered in a portal with
|
|
* fixed positioning so it is never clipped by an overflow/stacking ancestor. */
|
|
export default function Tooltip({
|
|
hint,
|
|
side = "top",
|
|
children,
|
|
}: {
|
|
hint: string;
|
|
side?: Side;
|
|
children: React.ReactNode;
|
|
}) {
|
|
const enabled = useSyncExternalStore(subscribeHints, hintsEnabled, hintsEnabled);
|
|
const ref = useRef<HTMLSpanElement>(null);
|
|
const tipRef = useRef<HTMLDivElement>(null);
|
|
const [coords, setCoords] = useState<Coords | null>(null);
|
|
|
|
function show() {
|
|
const el = ref.current;
|
|
if (!el) return;
|
|
const r = el.getBoundingClientRect();
|
|
// Prefer the requested side; flip to bottom if there's no room above.
|
|
const placement: Side = side === "bottom" || r.top < 90 ? "bottom" : "top";
|
|
const center = r.left + r.width / 2;
|
|
// Clamp using the MAX half-width so the caption can never overflow the viewport, even on the
|
|
// first paint (before we know its real width). A left-edge anchor near x=0 would otherwise push
|
|
// the centered box off-screen. The layout effect below refines this to the actual width.
|
|
setCoords({
|
|
left: Math.min(Math.max(center, MAX_HALF + MARGIN), window.innerWidth - MAX_HALF - MARGIN),
|
|
top: placement === "top" ? r.top - 8 : r.bottom + 8,
|
|
placement,
|
|
});
|
|
}
|
|
function hide() {
|
|
setCoords(null);
|
|
}
|
|
|
|
// Once rendered, re-center on the anchor using the caption's ACTUAL width (a short hint doesn't
|
|
// need the full 240px reservation), still clamped inside the viewport.
|
|
useLayoutEffect(() => {
|
|
const tip = tipRef.current;
|
|
const el = ref.current;
|
|
if (!coords || !tip || !el) return;
|
|
const r = el.getBoundingClientRect();
|
|
const half = tip.offsetWidth / 2;
|
|
const left = Math.min(
|
|
Math.max(r.left + r.width / 2, half + MARGIN),
|
|
window.innerWidth - half - MARGIN
|
|
);
|
|
if (Math.abs(left - coords.left) > 0.5) setCoords((c) => (c ? { ...c, left } : c));
|
|
}, [coords]);
|
|
|
|
if (!enabled || !hint) return <>{children}</>;
|
|
|
|
return (
|
|
<span
|
|
ref={ref}
|
|
onMouseEnter={show}
|
|
onMouseLeave={hide}
|
|
onFocus={show}
|
|
onBlur={hide}
|
|
className="inline-flex"
|
|
>
|
|
{children}
|
|
{coords &&
|
|
createPortal(
|
|
<div
|
|
ref={tipRef}
|
|
role="tooltip"
|
|
style={{
|
|
position: "fixed",
|
|
left: coords.left,
|
|
top: coords.top,
|
|
transform: `translateX(-50%) translateY(${coords.placement === "top" ? "-100%" : "0"})`,
|
|
}}
|
|
className="glass pointer-events-none z-[100] w-max max-w-[240px] px-2.5 py-1.5 rounded-lg text-xs leading-snug text-fg font-normal normal-case tracking-normal animate-[fadeIn_0.12s_ease]"
|
|
>
|
|
{hint}
|
|
</div>,
|
|
document.body
|
|
)}
|
|
</span>
|
|
);
|
|
}
|