--- a/client/src/components/CategoriesTooltip.js	Thu Jun 08 17:57:57 2017 +0200
+++ b/client/src/components/CategoriesTooltip.js	Thu Jun 08 18:54:36 2017 +0200
@@ -3,24 +3,65 @@
 
 class CategoriesTooltip extends Component {
 
+  state = {
+    activeCategory: null,
+    showCommentControl: false
+  }
+
+  componentDidUpdate = () => {
+    if (this.state.showCommentControl) {
+      this.commentControl.focus();
+    }
+  }
+
+  isCategoryActive = (category) => {
+    return this.state.activeCategory && this.state.activeCategory.key === category.key
+  }
+
   onButtonClick = (category) => {
-    if (typeof this.props.onCategoryClick === 'function') {
-      this.props.onCategoryClick(category)
+    if (category.hasOwnProperty('hasComment') && category.hasComment === true) {
+      this.setState({
+        activeCategory: this.state.activeCategory ? null : category,
+        showCommentControl: !this.state.showCommentControl
+      })
+    } else {
+      if (typeof this.props.onCategoryClick === 'function') {
+        this.props.onCategoryClick(category)
+      }
+    }
+  }
+
+  onSubmit = (e) => {
+    e.preventDefault();
+    if (this.state.showCommentControl) {
+      const comment = this.commentControl.value;
+      const { activeCategory } = this.state;
+      Object.assign(activeCategory, { comment: comment });
+      if (typeof this.props.onCategoryClick === 'function') {
+        this.props.onCategoryClick(activeCategory)
+      }
     }
   }
 
   render() {
     return (
       <div className="categories-tooltip">
-        <FormGroup className="buttons">
-        {this.props.categories.map((category) =>
-          <Button key={ category.name } bsStyle="primary" style={{ backgroundColor: category.color }}
-            onClick={this.onButtonClick.bind(this, category)}>{ category.name }</Button>
-        )}
-        </FormGroup>
-        <FormGroup>
-          <FormControl />
-        </FormGroup>
+        <form onSubmit={ this.onSubmit }>
+          <FormGroup className="buttons">
+          {this.props.categories.map((category) =>
+            <Button
+              key={ category.name }
+              bsStyle="primary"
+              style={{ backgroundColor: category.color }}
+              active={ this.isCategoryActive(category)  }
+              onClick={ this.onButtonClick.bind(this, category) }>{ category.name }</Button>
+          )}
+          </FormGroup>
+          {this.state.showCommentControl &&
+          <FormGroup>
+            <FormControl inputRef={(ref) => { this.commentControl = ref; }} />
+          </FormGroup>}
+        </form>
       </div>
     );
   }