diff --git a/app/src/components/CheckCalibration/EndOfStepComparisons.js b/app/src/components/CheckCalibration/EndOfStepComparisons.js index 9684d89303a..d35796c5732 100644 --- a/app/src/components/CheckCalibration/EndOfStepComparisons.js +++ b/app/src/components/CheckCalibration/EndOfStepComparisons.js @@ -4,6 +4,7 @@ import * as React from 'react' import cx from 'classnames' +import { Tooltip, useHoverTooltip, TOOLTIP_TOP } from '@opentrons/components' import { type RobotCalibrationCheckComparison } from '../../calibration' import { ThresholdValue } from './ThresholdValue' import { IndividualAxisDifferenceValue } from './DifferenceValue' @@ -18,6 +19,8 @@ type EndOfStepComparisonsProps = {| const TOLERANCE_RANGE = 'tolerance range' const DIFFERENCE = 'difference' +const DIFFERENCE_TOOLTIP = + 'The difference between jogged tip position and saved calibration coordinate.' const axisToIndex: { [Axis]: number } = { x: 0, @@ -31,13 +34,19 @@ export function EndOfStepComparison( props: EndOfStepComparisonsProps ): React.Node { const { thresholdVector, differenceVector } = props.comparison + const [targetProps, tooltipProps] = useHoverTooltip({ + placement: TOOLTIP_TOP, + }) return (
- + + {DIFFERENCE_TOOLTIP} diff --git a/app/src/components/CheckCalibration/PipetteComparisons.js b/app/src/components/CheckCalibration/PipetteComparisons.js index f43fd9e0a7b..7fb63d831af 100644 --- a/app/src/components/CheckCalibration/PipetteComparisons.js +++ b/app/src/components/CheckCalibration/PipetteComparisons.js @@ -1,7 +1,12 @@ // @flow import * as React from 'react' import cx from 'classnames' -import { Icon } from '@opentrons/components' +import { + Icon, + Tooltip, + useHoverTooltip, + TOOLTIP_TOP, +} from '@opentrons/components' import { getPipetteModelSpecs } from '@opentrons/shared-data' import type { RobotCalibrationCheckInstrument, @@ -24,6 +29,8 @@ const POSITION = 'position' const STATUS = 'status' const TOLERANCE_RANGE = 'tolerance range' const DIFFERENCE = 'difference' +const DIFFERENCE_TOOLTIP = + 'The difference between jogged tip position and saved calibration coordinate.' const HEIGHT_CHECK_DISPLAY_NAME = 'Slot 5 Z-axis' const POINT_ONE_CHECK_DISPLAY_NAME = 'Slot 1 X/Y-axis' @@ -49,6 +56,10 @@ export function PipetteComparisons(props: PipetteComparisonsProps): React.Node { const { pipette, comparisonsByStep, allSteps } = props const { displayName } = getPipetteModelSpecs(pipette.model) || {} + + const [targetProps, tooltipProps] = useHoverTooltip({ + placement: TOOLTIP_TOP, + }) return (
@@ -62,7 +73,10 @@ export function PipetteComparisons(props: PipetteComparisonsProps): React.Node {
- + + {DIFFERENCE_TOOLTIP}
{TOLERANCE_RANGE}{DIFFERENCE} + {DIFFERENCE} +
{POSITION} {STATUS} {TOLERANCE_RANGE}{DIFFERENCE} + {DIFFERENCE} +