Add tooltip for why you can't run a section

client/components/RunSectionForm.tsx

@@ -1,6 +1,6 @@
 import { observer } from "mobx-react";
 import * as React from "react";
-import { Form, Header, Icon, Segment } from "semantic-ui-react";
+import { Form, Header, Icon, Segment, Popup } from "semantic-ui-react";
 
 import { DurationView, SectionChooser } from "@client/components";
 import { UiStore } from "@client/state";
@@ -30,8 +30,14 @@ export default class RunSectionForm extends React.Component<
 
   render() {
     const { sectionId, duration } = this.state;
+    const runButton = (
+      <Form.Button primary onClick={this.run} disabled={!this.isValid} className="runSectionForm-runButton">
+        <Icon name="play" />
+        Run
+      </Form.Button>
+    );
     return (
-      <Segment>
+      <Segment className="runSectionForm">
         <Header>Run Section</Header>
         <Form>
           <SectionChooser
@@ -45,10 +51,14 @@ export default class RunSectionForm extends React.Component<
             duration={duration}
             onDurationChange={this.onDurationChange}
           />
-          <Form.Button primary onClick={this.run} disabled={!this.isValid}>
-            <Icon name="play" />
-            Run
-          </Form.Button>
+          {
+            this.isValid ? runButton :
+            <Popup trigger={runButton} on={["click", "hover"]} position="right center">
+              <Popup.Content>
+                Select a section to run and a duration
+              </Popup.Content>
+            </Popup>
+          }
         </Form>
       </Segment>
     );