add well order tooltip

Opentrons · Mar 26, 2019 · 2ad9f97 · 2ad9f97
1 parent e4b2d61
commit 2ad9f97
Showing 1 changed file with 27 additions and 18 deletions.
diff --git a/protocol-designer/src/components/StepEditForm/fields/WellOrder/index.js b/protocol-designer/src/components/StepEditForm/fields/WellOrder/index.js
@@ -1,15 +1,18 @@
 // @flow
 import * as React from 'react'
 import {connect} from 'react-redux'
-import {FormGroup} from '@opentrons/components'
+import {HoverTooltip, FormGroup} from '@opentrons/components'
 import cx from 'classnames'
+import i18n from '../../../../localization'
 import {selectors as stepFormSelectors} from '../../../../step-forms'
-import styles from './WellOrderInput.css'
-import stepEditStyles from '../../StepEditForm.css'
-import WellOrderModal from './WellOrderModal'
 import ZIG_ZAG_IMAGE from '../../../../images/zig_zag_icon.svg'
+import WellOrderModal from './WellOrderModal'
+
 import type {BaseState} from '../../../../types'
 
+import stepEditStyles from '../../StepEditForm.css'
+import styles from './WellOrderInput.css'
+
 type OP = {
   className?: ?string,
   label?: string,
@@ -30,20 +33,26 @@ class WellOrderInput extends React.Component<OP & SP, WellOrderInputState> {
       [stepEditStyles.no_label]: !this.props.label,
     })
     return (
-      <FormGroup label={this.props.label} className={className}>
-        <WellOrderModal
-          prefix={this.props.prefix}
-          closeModal={this.handleClose}
-          isOpen={this.state.isModalOpen} />
-        <img
-          onClick={this.handleOpen}
-          src={ZIG_ZAG_IMAGE}
-          className={cx(
-            styles.well_order_icon,
-            {[styles.icon_with_label]: this.props.label},
-            ...this.props.iconClassNames,
-          )} />
-      </FormGroup>
+      <HoverTooltip tooltipComponent={i18n.t('form.step_edit_form.field.well_order.label')}>
+        {(hoverTooltipHandlers) =>
+          <div {...hoverTooltipHandlers}>
+            <FormGroup label={this.props.label} className={className}>
+              <WellOrderModal
+                prefix={this.props.prefix}
+                closeModal={this.handleClose}
+                isOpen={this.state.isModalOpen} />
+              <img
+                onClick={this.handleOpen}
+                src={ZIG_ZAG_IMAGE}
+                className={cx(
+                  styles.well_order_icon,
+                  {[styles.icon_with_label]: this.props.label},
+                  ...this.props.iconClassNames,
+                )} />
+            </FormGroup>
+          </div>
+        }
+      </HoverTooltip>
     )
   }
 }