adjust timeline hover tooltip position
This commit is contained in:
@@ -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 = () => {
|
||||||
|
|||||||
Reference in New Issue
Block a user