From cff0a15f7e3793d7983fb0784da7b82d81435f5a Mon Sep 17 00:00:00 2001
From: Lukas Martinelli <me@lukasmartinelli.ch>
Date: Mon, 9 Jan 2017 22:54:30 +0100
Subject: [PATCH] Show hint when hovering over function icon

---
 src/components/fields/DocLabel.jsx      | 2 ++
 src/components/fields/ZoomSpecField.jsx | 8 +++++++-
 2 files changed, 9 insertions(+), 1 deletion(-)

diff --git a/src/components/fields/DocLabel.jsx b/src/components/fields/DocLabel.jsx
index e700df8..54dee3d 100644
--- a/src/components/fields/DocLabel.jsx
+++ b/src/components/fields/DocLabel.jsx
@@ -8,6 +8,7 @@ export default class DocLabel extends React.Component {
     label: React.PropTypes.string.isRequired,
     doc: React.PropTypes.string.isRequired,
     style: React.PropTypes.object,
+    cursorTargetStyle: React.PropTypes.object,
   }
 
   constructor(props) {
@@ -29,6 +30,7 @@ export default class DocLabel extends React.Component {
         onMouseOut={e => this.setState({showDoc: false})}
         style={{
           cursor: 'help',
+          ...this.props.cursorTargetStyle,
         }}
       >
         {this.props.label}
diff --git a/src/components/fields/ZoomSpecField.jsx b/src/components/fields/ZoomSpecField.jsx
index e4f96e5..596e298 100644
--- a/src/components/fields/ZoomSpecField.jsx
+++ b/src/components/fields/ZoomSpecField.jsx
@@ -174,10 +174,16 @@ export default class ZoomSpecField extends React.Component {
             verticalAlign: 'top',
             backgroundColor: null,
             display: 'inline-block',
+            paddingBottom: 0,
+            paddingTop: 0,
           }}
           onClick={this.makeZoomFunction.bind(this)}
         >
-          <FunctionIcon />
+          <DocLabel
+            label={<FunctionIcon />}
+            cursorTargetStyle={{ cursor: 'pointer' }}
+            doc="Turn property into a zoom function to enable a map feature to change with map's zoom level."
+          />
         </Button>
         }
         <SpecField {...this.props} style={{ width: '50%' } }/>