diff --git a/packages/stats/app/src/routes/[lab]/index.tsx b/packages/stats/app/src/routes/[lab]/index.tsx index 5567700341..c3147b1c57 100644 --- a/packages/stats/app/src/routes/[lab]/index.tsx +++ b/packages/stats/app/src/routes/[lab]/index.tsx @@ -559,24 +559,28 @@ function LabModelRow(props: { }) { const i18n = useI18n() const language = useLanguage() - const showTooltip = (x: number, y: number) => { + const showTooltip = (target: HTMLAnchorElement) => { + const rect = target.getBoundingClientRect() const viewportWidth = typeof window === "undefined" ? 0 : window.innerWidth const viewportHeight = typeof window === "undefined" ? 0 : window.innerHeight + const anchorX = viewportWidth > 0 ? Math.min(Math.max(rect.left + 320, 24), viewportWidth - 24) : rect.left + 320 props.onTooltipChange({ model: props.model, - placement: viewportWidth > 0 && x > viewportWidth - 280 ? "left" : "right", + placement: viewportWidth > 0 && anchorX > viewportWidth - 280 ? "left" : "right", usage: props.usage, - x, - y: viewportHeight > 0 ? Math.min(Math.max(y, 96), viewportHeight - 128) : y, + x: anchorX, + y: + viewportHeight > 0 + ? Math.min(Math.max(rect.top + rect.height / 2, 96), viewportHeight - 128) + : rect.top + rect.height / 2, }) } const showPointerTooltip: JSX.EventHandler = (event) => { if (event.pointerType === "touch") return - showTooltip(event.clientX, event.clientY) + showTooltip(event.currentTarget) } const showFocusTooltip: JSX.EventHandler = (event) => { - const rect = event.currentTarget.getBoundingClientRect() - showTooltip(rect.left + rect.width * 0.58, rect.top + rect.height / 2) + showTooltip(event.currentTarget) } return ( props.onTooltipChange(undefined)} onFocus={showFocusTooltip} onPointerEnter={showPointerTooltip} + onPointerDown={() => props.onTooltipChange(undefined)} onPointerLeave={(event) => { if (event.pointerType === "touch") return props.onTooltipChange(undefined) }} - onPointerMove={showPointerTooltip} + onClick={() => props.onTooltipChange(undefined)} >