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 @@ -1,9 +1,11 @@ // @flow +import classNames from 'classnames'; import invariant from 'invariant'; import * as React from 'react'; import type { TooltipPositionStyle } from './tooltip-utils'; +import css from './tooltip.css'; const onMouseLeaveSourceDisappearTimeoutMs = 200; const onMouseLeaveTooltipDisappearTimeoutMs = 100; @@ -118,7 +120,51 @@ [clearTooltip], ); - const tooltip = React.useMemo(() => {}, []); + const tooltip = React.useMemo(() => { + if (!tooltipNode || !tooltipPosition) { + return null; + } + const tooltipContainerStyle = { + position: 'absolute', + top: tooltipPosition.yCoord, + left: tooltipPosition.xCoord, + }; + + let tooltipStyle = { + position: 'absolute', + }; + + const { verticalPosition, horizontalPosition, alignment } = tooltipPosition; + + if (verticalPosition === 'top') { + tooltipStyle = { ...tooltipStyle, bottom: 0 }; + } else if (verticalPosition === 'bottom') { + tooltipStyle = { ...tooltipStyle, top: 0 }; + } + if (horizontalPosition === 'left') { + tooltipStyle = { ...tooltipStyle, right: 0 }; + } else if (horizontalPosition === 'right') { + tooltipStyle = { ...tooltipStyle, left: 0 }; + } + + const tooltipClassName = classNames({ + [css.leftTooltipAlign]: alignment === 'left', + [css.rightTooltipAlign]: alignment === 'right', + }); + + return ( +