refactor(app): calcheck: add tooltip over table header (#5953)

Opentrons · Jun 18, 2020 · 78c3ebb · 78c3ebb
1 parent fbd1506
commit 78c3ebb
Show file tree

Hide file tree

Showing 2 changed files with 26 additions and 3 deletions.
diff --git 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 (
     <div className={styles.individual_step_comparison_wrapper}>
       <table className={cx(styles.pipette_data_table, styles.individual_data)}>
         <thead>
           <tr>
             <th>{TOLERANCE_RANGE}</th>
-            <th>{DIFFERENCE}</th>
+            <th>
+              <span {...targetProps}>{DIFFERENCE}</span>
+            </th>
+            <Tooltip {...tooltipProps}>{DIFFERENCE_TOOLTIP}</Tooltip>
           </tr>
         </thead>
         <tbody>

diff --git 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 (
     <div className={styles.pipette_data_wrapper}>
       <h5 className={styles.pipette_data_header}>
@@ -62,7 +73,10 @@ export function PipetteComparisons(props: PipetteComparisonsProps): React.Node {
             <th>{POSITION}</th>
             <th>{STATUS}</th>
             <th>{TOLERANCE_RANGE}</th>
-            <th>{DIFFERENCE}</th>
+            <th>
+              <span {...targetProps}>{DIFFERENCE}</span>
+            </th>
+            <Tooltip {...tooltipProps}>{DIFFERENCE_TOOLTIP}</Tooltip>
           </tr>
         </thead>
         <tbody>