From 559971c6dac83e7f56fa6ee423bd5f9edf034aed Mon Sep 17 00:00:00 2001
From: Maciej Ziarkowski <maciej.ziarkowski@gmail.com>
Date: Mon, 23 Mar 2020 23:31:33 +0000
Subject: [PATCH] Improve tooltip show/hide

---
 app/src/frontend/components/tooltip.tsx | 25 +++++++++++++++++--------
 1 file changed, 17 insertions(+), 8 deletions(-)

diff --git a/app/src/frontend/components/tooltip.tsx b/app/src/frontend/components/tooltip.tsx
index 631ba720..27e60350 100644
--- a/app/src/frontend/components/tooltip.tsx
+++ b/app/src/frontend/components/tooltip.tsx
@@ -18,22 +18,31 @@ class Tooltip extends Component<TooltipProps, TooltipState> {
         this.state = {
             active: false
         };
-        this.handleClick = this.handleClick.bind(this);
+
+        this.toggleVisible = this.toggleVisible.bind(this);
+        this.handleBlur = this.handleBlur.bind(this);
     }
 
-    handleClick(event) {
-        event.preventDefault();
+    
+    toggleVisible() {
+        this.setState(state => ({
+                active: !state.active
+        }));
+    }
+
+    handleBlur(event) {
+        if(!event.currentTarget.contains(event.relatedTarget)) {
         this.setState({
-            active: !this.state.active
+                active: false
         });
     }
+    }
 
     render() {
         return (
-            <div className="tooltip-wrap">
-                <button className={(this.state.active? 'active ': '') + 'tooltip-hint icon-button'}
-                    title={this.props.text}
-                    onClick={this.handleClick}>
+            <div className="tooltip-wrap" tabIndex={0} onBlur={this.handleBlur}>
+                <button type="button" className={(this.state.active? 'active ': '') + 'tooltip-hint icon-button'}
+                    onClick={this.toggleVisible}>
                     Hint
                     <InfoIcon />
                 </button>