Introduce doc label for help

src/components/fields/DocLabel.jsx

@@ -0,0 +1,49 @@
+import React from 'react'
+import input from '../../config/input.js'
+import colors from '../../config/colors.js'
+import { margins, fontSizes } from '../../config/scales.js'
+
+export default class DocLabel extends React.Component {
+  static propTypes = {
+    label: React.PropTypes.string.isRequired,
+    doc: React.PropTypes.string.isRequired,
+    style: React.PropTypes.object,
+  }
+
+  constructor(props) {
+    super(props)
+    this.state = { showDoc: false }
+  }
+
+  render() {
+    return <label
+      style={{
+        ...input.label,
+        ...this.props.style,
+        position: 'relative',
+      }}
+    >
+      <span
+        onMouseOver={e => this.setState({showDoc: true})}
+        onMouseOut={e => this.setState({showDoc: false})}
+        style={{
+          cursor: 'help',
+        }}
+      >
+        {this.props.label}
+      </span>
+      <div style={{
+        backgroundColor: colors.gray,
+        padding: margins[1],
+        position: 'absolute',
+        top: 20,
+        left: 0,
+        width: 100,
+        display: this.state.showDoc ? null : 'none',
+        zIndex: 3,
+      }}>
+        {this.props.doc}
+      </div>
+    </label>
+  }
+}

src/components/fields/PropertyGroup.jsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import GlSpec from 'mapbox-gl-style-spec/reference/latest.min.js'
+import GlSpec from 'mapbox-gl-style-spec/reference/latest.js'
 
 import ZoomSpecField from './ZoomSpecField'
 import colors from '../../config/colors'

src/components/fields/ZoomSpecField.jsx

@@ -8,6 +8,7 @@ import BooleanField from './BooleanField'
 import ColorField from './ColorField'
 import StringField from './StringField'
 import SpecField from './SpecField'
+import DocLabel from './DocLabel'
 
 import AddIcon from 'react-icons/lib/md/add-circle-outline'
 import DeleteIcon from 'react-icons/lib/md/delete'
@@ -44,9 +45,11 @@ export default class ZoomSpecField extends React.Component {
   }
 
   render() {
-    let label = <label style={{...input.label}}>
+    console.log(this.props.fieldSpec)
-      {labelFromFieldName(this.props.fieldName)}
+    let label = <DocLabel
-    </label>
+      label={labelFromFieldName(this.props.fieldName)}
+      doc={this.props.fieldSpec.doc}
+    />
 
     if(isZoomField(this.props.value)) {
       const zoomFields = this.props.value.stops.map((stop, idx) => {