diff --git a/web/chat/tooltip-provider.js b/web/chat/tooltip-provider.js --- a/web/chat/tooltip-provider.js +++ b/web/chat/tooltip-provider.js @@ -120,8 +120,8 @@ } const tooltipContainerStyle = { position: 'absolute', - top: tooltipPosition.yCoord, - left: tooltipPosition.xCoord, + top: tooltipPosition.anchorPointY, + left: tooltipPosition.anchorPointX, }; const { verticalPosition, horizontalPosition } = tooltipPosition; diff --git a/web/utils/tooltip-utils.js b/web/utils/tooltip-utils.js --- a/web/utils/tooltip-utils.js +++ b/web/utils/tooltip-utils.js @@ -48,8 +48,8 @@ }; export type TooltipPositionStyle = { - +xCoord: number, - +yCoord: number, + +anchorPointX: number, + +anchorPointY: number, +verticalPosition: 'top' | 'bottom', +horizontalPosition: 'left' | 'right', +alignment: 'left' | 'center' | 'right', @@ -212,40 +212,40 @@ }: GetMessageActionTooltipStyleParams): TooltipPositionStyle { if (tooltipPosition === tooltipPositions.RIGHT_TOP) { return { - xCoord: sourcePositionInfo.right, - yCoord: sourcePositionInfo.top, + anchorPointX: sourcePositionInfo.right, + anchorPointY: sourcePositionInfo.top, horizontalPosition: 'right', verticalPosition: 'bottom', alignment: 'left', }; } else if (tooltipPosition === tooltipPositions.LEFT_TOP) { return { - xCoord: sourcePositionInfo.left, - yCoord: sourcePositionInfo.top, + anchorPointX: sourcePositionInfo.left, + anchorPointY: sourcePositionInfo.top, horizontalPosition: 'left', verticalPosition: 'bottom', alignment: 'right', }; } else if (tooltipPosition === tooltipPositions.RIGHT_BOTTOM) { return { - xCoord: sourcePositionInfo.right, - yCoord: sourcePositionInfo.bottom, + anchorPointX: sourcePositionInfo.right, + anchorPointY: sourcePositionInfo.bottom, horizontalPosition: 'right', verticalPosition: 'top', alignment: 'left', }; } else if (tooltipPosition === tooltipPositions.LEFT_BOTTOM) { return { - xCoord: sourcePositionInfo.left, - yCoord: sourcePositionInfo.bottom, + anchorPointX: sourcePositionInfo.left, + anchorPointY: sourcePositionInfo.bottom, horizontalPosition: 'left', verticalPosition: 'top', alignment: 'right', }; } else if (tooltipPosition === tooltipPositions.LEFT) { return { - xCoord: sourcePositionInfo.left, - yCoord: + anchorPointX: sourcePositionInfo.left, + anchorPointY: sourcePositionInfo.top + sourcePositionInfo.height / 2 - tooltipSize.height / 2, @@ -255,8 +255,8 @@ }; } else if (tooltipPosition === tooltipPositions.RIGHT) { return { - xCoord: sourcePositionInfo.right, - yCoord: + anchorPointX: sourcePositionInfo.right, + anchorPointY: sourcePositionInfo.top + sourcePositionInfo.height / 2 - tooltipSize.height / 2, @@ -266,22 +266,22 @@ }; } else if (tooltipPosition === tooltipPositions.TOP) { return { - xCoord: + anchorPointX: sourcePositionInfo.left + sourcePositionInfo.width / 2 - tooltipSize.width / 2, - yCoord: sourcePositionInfo.top, + anchorPointY: sourcePositionInfo.top, horizontalPosition: 'right', verticalPosition: 'top', alignment: 'center', }; } else if (tooltipPosition === tooltipPositions.BOTTOM) { return { - xCoord: + anchorPointX: sourcePositionInfo.left + sourcePositionInfo.width / 2 - tooltipSize.width / 2, - yCoord: sourcePositionInfo.bottom, + anchorPointY: sourcePositionInfo.bottom, horizontalPosition: 'right', verticalPosition: 'bottom', alignment: 'center',