From b40375f2a9a45a750bddcfdca48f067c6b8b9dd7 Mon Sep 17 00:00:00 2001
From: Stuart 'Stevie' Leitch <hotblack@disasterarea.org.uk>
Date: Sun, 5 Aug 2018 14:36:55 +0100
Subject: [PATCH] Add tooltip to validation icon

---
 package-lock.json       | 5 +++++
 package.json            | 1 +
 src/UserRegistration.js | 5 +++--
 3 files changed, 9 insertions(+), 2 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index a07d10e..de15fd0 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1650,6 +1650,11 @@
       "resolved": "https://registry.npmjs.org/bulma/-/bulma-0.7.1.tgz",
       "integrity": "sha512-wRSO2LXB+qI9Pyz2id+uZr4quz5aftSN7Ay1ysr1+krzVp3utD+Ci4CeKuZdrYGc800t65b7heXBL6qw2Wo/lQ=="
     },
+    "bulma-tooltip": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/bulma-tooltip/-/bulma-tooltip-2.0.1.tgz",
+      "integrity": "sha512-y2e8ER6wej5hBgb5OXoyBqBxSD+1aw6kFHNp/HbOWw4UB4dKwREuNa/RecM6mjrSSxO9IeED787CU++Y1bbStg=="
+    },
     "bytes": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/bytes/-/bytes-3.0.0.tgz",
diff --git a/package.json b/package.json
index 68c1cd1..7aee37e 100644
--- a/package.json
+++ b/package.json
@@ -13,6 +13,7 @@
     "@fortawesome/free-solid-svg-icons": "^5.2.0",
     "@fortawesome/react-fontawesome": "^0.1.0",
     "bulma": "^0.7.1",
+    "bulma-tooltip": "^2.0.1",
     "enzyme": "^3.3.0",
     "enzyme-adapter-react-16": "^1.1.1",
     "react": "^16.4.1",
diff --git a/src/UserRegistration.js b/src/UserRegistration.js
index 1f8b8d0..8054d5b 100644
--- a/src/UserRegistration.js
+++ b/src/UserRegistration.js
@@ -1,5 +1,6 @@
 import React, { Component } from 'react';
 import 'bulma/css/bulma.css'
+import 'bulma-tooltip/dist/css/bulma-tooltip.min.css'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import { faExclamationCircle } from '@fortawesome/free-solid-svg-icons'
 
@@ -66,13 +67,13 @@ export class UserRegistration extends Component {
                     <div className="control has-icons-right">
                         <input name="confirm" type="password" className={'input' + (this.state.passwordMatchesConfirm ? '' : ' is-danger')} onChange={this.handleInputChange}/>
                         {!this.state.passwordMatchesConfirm &&
-                            <span className="icon is-small is-right">
+                            <span className="icon is-right tooltip" style={{pointerEvents: 'inherit'}} data-tooltip="Confirmation does not match password">
                                 <FontAwesomeIcon icon={faExclamationCircle}/>
                             </span>
                         }
                     </div>
                 </div>
-                <button className="button is-primary" onClick={this.handleSubmit} disabled={!this.submitEnabled()}>Submit</button>
+                <button className="button is-primary" onClick={this.handleSubmit} disabled={!this.submitEnabled()} >Submit</button>
             </div>
         );
     }