added report map tooltip

src/components/ReportForm.js

@@ -11,6 +11,8 @@ import CloseIcon from '@material-ui/icons/Close';
 import Button from '@material-ui/core/Button';
 import firebase from '../firebase.js';
 import GoogleMap from '../components/ReportMap';
+import Modal from '@material-ui/core/Modal';
+import Typography from '@material-ui/core/Typography';
 
 /**
  * Styles that the different
@@ -51,6 +53,13 @@ const styles = theme => ({
     menu: {
         width: 200,
     },
+    paper: {
+        position: 'absolute',
+        width: theme.spacing.unit * 50,
+        backgroundColor: theme.palette.background.paper,
+        boxShadow: theme.shadows[5],
+        padding: theme.spacing.unit * 4,
+    }
 });
 
 /** 
@@ -222,15 +231,15 @@ class ReportForm extends React.Component {
             year = d.getFullYear();
 
         return year;
-}
+    }
 
-/**
+    /**
-* Function for formatting the
+    * Function for formatting the
-* month as a string that
+    * month as a string that
-* Material UI can use.
+    * Material UI can use.
-* @param {*} date, Date passed in. 
+    * @param {*} date, Date passed in. 
-*/
+    */
-getMonth = date => {
+    getMonth = date => {
         var d = new Date(date),
             month = d.getMonth() + 1;
 
@@ -241,7 +250,7 @@ getMonth = date => {
         }
 
         return month;
-}
+    }
 
     /**
      * State of form components.
@@ -255,9 +264,25 @@ getMonth = date => {
         desc: '',
         lat: '',
         lng: '',
-    open: false
+        open: false,
+        openModal: false, 
+        hasModalOpened: false
     };
 
+    handleModalOpen = () => !this.state.hasModalOpened ? this.setState({ openModal: true, hasModalOpened: true }) : null;
+
+    handleModalClose = () => {
+        this.setState({ openModal: false });
+    };
+
+    getModalStyle = () => {
+        return {
+            top: `25%`,
+            left: `75%`,
+            transform: `translate(-25%, -75%)`,
+        };
+    }
+
     /**
      * Handles state change in form
      * components.
@@ -474,7 +499,6 @@ getMonth = date => {
                                         }}
                                     />
                                 </Grid>
-
                                 <Grid item xs={12}>
                                     <Button variant="contained" type="submit" color="primary" className={classes.button}>
                                         Submit
@@ -482,8 +506,23 @@ getMonth = date => {
                                 </Grid>
                             </Grid>
                         </Grid>
-            <Grid item xs={12} md={6}>
+                        <Grid item xs={12} md={6} onMouseEnter={this.handleModalOpen}>
-              <GoogleMap onClick={this.getCoordinates} />
+                            <GoogleMap onClick={this.getCoordinates}/>
+                            <Modal
+                                aria-labelledby="simple-modal-title"
+                                aria-describedby="simple-modal-description"
+                                open={this.state.openModal}
+                                onClose={this.handleModalClose}
+                            >
+                                <div style={this.getModalStyle()} className={classes.paper}>
+                                    <Typography variant="title" id="modal-title">
+                                        Need a little help?
+                                    </Typography>
+                                    <Typography variant="subheading" id="simple-modal-description">
+                                        Click on the map to drop a pin!
+                                    </Typography>
+                                </div>
+                            </Modal>
                         </Grid>
                     </Grid>
                 </form>