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 (
{TOLERANCE_RANGE} |
- {DIFFERENCE} |
+
+ {DIFFERENCE}
+ |
+ {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 {
{POSITION} |
{STATUS} |
{TOLERANCE_RANGE} |
- {DIFFERENCE} |
+
+ {DIFFERENCE}
+ |
+ {DIFFERENCE_TOOLTIP}