adjust timeline hover tooltip position

This commit is contained in:
Shantur Rathore
2025-12-08 14:26:42 +00:00
parent 4ae54a1f7b
commit 5cf3c001b5

View File

@@ -259,16 +259,20 @@ const MessageTimeline: Component<MessageTimelineProps> = (props) => {
if (typeof window === "undefined") return if (typeof window === "undefined") return
clearHoverTimer() clearHoverTimer()
const target = event.currentTarget as HTMLButtonElement const target = event.currentTarget as HTMLButtonElement
hoverTimer = window.setTimeout(() => { hoverTimer = window.setTimeout(() => {
const rect = target.getBoundingClientRect() const rect = target.getBoundingClientRect()
const preferredTop = rect.top + rect.height / 2 const tooltipWidth = 360
const clampedTop = Math.min(window.innerHeight - 220, Math.max(16, preferredTop - 110)) const tooltipHeight = 420
const tooltipWidth = 360 const verticalGap = 16
const preferredLeft = rect.right + 12 const horizontalGap = 16
const clampedLeft = Math.min(window.innerWidth - tooltipWidth - 16, preferredLeft) const preferredTop = rect.top + rect.height / 2 - tooltipHeight / 2
setTooltipCoords({ top: clampedTop, left: clampedLeft }) const clampedTop = Math.min(window.innerHeight - tooltipHeight - verticalGap, Math.max(verticalGap, preferredTop))
setHoveredSegment(segment) const preferredLeft = rect.left - tooltipWidth - horizontalGap
}, 200) const clampedLeft = Math.max(horizontalGap, preferredLeft)
setTooltipCoords({ top: clampedTop, left: clampedLeft })
setHoveredSegment(segment)
}, 200)
} }
const handleMouseLeave = () => { const handleMouseLeave = () => {