From 61ca9f318dd0f7b3747122411430101781156c4a Mon Sep 17 00:00:00 2001
From: colinmorris <colin.morris2@gmail.com>
Date: Thu, 2 Mar 2017 10:34:10 -0800
Subject: [PATCH] toolbox tooltips

---
 src/Toolbox.js   | 21 ++++++++++++++-------
 src/constants.js |  7 ++++++-
 2 files changed, 20 insertions(+), 8 deletions(-)

diff --git a/src/Toolbox.js b/src/Toolbox.js
index c7d88f6..db793d6 100644
--- a/src/Toolbox.js
+++ b/src/Toolbox.js
@@ -4,7 +4,7 @@ import Clipboard from 'clipboard';
 import './Toolbox.css';
 
 import config from './config.js';
-import {MODE} from './constants.js';
+import {MODE, MODE_TOOLTIPS} from './constants.js';
 
 // TODO: is this really the orthodox way to do this? :/
 new Clipboard('#perma');
@@ -23,6 +23,7 @@ class Toolbox extends Component {
   
   renderModeRadio = (mode_key) => {
     var mode = MODE[mode_key];
+    var tt = MODE_TOOLTIPS[mode_key];
     // TODO: Really when we get a change to state.verse, we should see if
     // the new verse is custom && mode is color_title, and if so, we should
     // automatically switch to a different mode. But bleh.
@@ -31,7 +32,8 @@ class Toolbox extends Component {
     var divCname = disabled ? "radio-inline disabled" : "radio-inline";
     return (
         <div className={divCname} key={mode}>
-          <label><input type="radio" 
+          <label title={tt}>
+              <input type="radio" 
               disabled={disabled}
               checked={this.props.mode === mode}
               value={mode}
@@ -50,12 +52,13 @@ class Toolbox extends Component {
     var modes = [
       {label: 'show all', ss: [false, false]},
       {label: 'ignore all', ss: [true, false]},
-      {label: 'ignore stopwords', ss: [false, true]},
+      {label: 'ignore stopwords', ss: [false, true], 
+        tt: 'Show single-word matches, unless they\'re common words like "the" or "and"'},
     ];
     var radios = [];
     for (let mode of modes) {
       radios.push((
-          <label key={mode.label}>
+          <label key={mode.label} title={mode.tt}>
             <input type="radio"
               checked={singstop[0] === mode.ss[0] && singstop[1] === mode.ss[1]}
               value={mode.ss}
@@ -70,7 +73,9 @@ class Toolbox extends Component {
     }
     return (
         <div className="col-xs-12 col-md-4">
-          <label>Single-word matches</label>
+          <label title="How to treat individual squares floating off the main diagonal">
+            Single-word matches
+          </label>
           <form className="form-control">
           {radios}
           </form>
@@ -81,7 +86,9 @@ class Toolbox extends Component {
   renderMobileCheckbox = () => {
     return (
         <div className="col-xs-6 col-md-2">
-        <div className="checkbox">
+        <div className="checkbox"
+          title="(Janky) UI intended for small screens"
+        >
           <label>
             <input type="checkbox" checked={this.props.mobile}
               onChange={(e) => {
@@ -152,7 +159,7 @@ class Toolbox extends Component {
 
           <div className="col-xs-12 col-md-5">
             <label>
-              Mode
+              Color Mode
               <form className="form-control">
                 {moderadios}
               </form>
diff --git a/src/constants.js b/src/constants.js
index bf485e2..aa2352c 100644
--- a/src/constants.js
+++ b/src/constants.js
@@ -4,6 +4,11 @@ var MODE = {
   color_title: 'color title',
 };
 
+const MODE_TOOLTIPS = {
+  colorful: 'Assigns a unique colour to each word that occurs at least once in the song.',
+  color_title: 'Color squares corresponding to words in the title of the song.',
+}
+
 var NOINDEX = -1;
 
 var CUSTOM_SLUG = 'custom';
@@ -14,4 +19,4 @@ var STOPWORDS = new Set([
   'that', 'on', 'be', 'is', 'with', 'of', 'as',
 ]);
 
-export {STOPWORDS, NOINDEX, MODE, CUSTOM_SLUG};
+export {STOPWORDS, NOINDEX, MODE, MODE_TOOLTIPS, CUSTOM_SLUG};