replace reactstrap tooltip by a simple tooltip (toggle div on mouseover)

src/components/form/HelpButton.js

@@ -1,5 +1,4 @@
 import React, {Component} from "react";
-import {Tooltip} from 'reactstrap';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import { faQuestionCircle } from '@fortawesome/free-solid-svg-icons';
 
@@ -8,33 +7,38 @@ class HelpButton extends Component {
     constructor(props) {
         super(props);
 
-        this.toggle = this.toggle.bind(this);
+
         this.state = {
             tooltipOpen: false
         };
     }
 
-    toggle() {
+    showTooltip = () => {
+        console.log("show");
         this.setState({
-            tooltipOpen: !this.state.tooltipOpen
+            tooltipOpen: true
         });
-    }
+    };
 
+    hideTooltip = () => {
+        console.log("hide");
+        this.setState({
+            tooltipOpen: false
+        });
+    };
 
-    render(){
-        return (<div>
-            <FontAwesomeIcon icon={faQuestionCircle} id={this.props.id+"_"} />
-        </div>);
-    }
-
-    badrender() {
+    render() {
         return (
-            <div >
-                <Tooltip placement="right" isOpen={this.state.tooltipOpen} target={this.props.id+"_"} toggle={this.toggle}>
-                    {this.props.children}
-                </Tooltip>
-                <FontAwesomeIcon icon={faQuestionCircle} id={this.props.id+"_"} />
-            </div>
+            <span>
+                <span>
+                    {this.state.tooltipOpen?<span style={{position:"absolute", zIndex:10, fontSize:"12px", color: "#000",backgroundColor:"#fff",display:"inline-block",borderRadius:"0.25rem",boxShadow:"-5px 0 5px rgba(0,0,0,0.5)",maxWidth:"200px",padding:"10px",marginLeft:"-215px", marginTop:"-25px"}}>
+                        <span style={{ position:"absolute", width: 0,height: 0, borderTop: "10px solid transparent", borderBottom: "10px solid transparent", borderLeft: "10px solid #fff", marginLeft:"190px", marginTop:"15px"}}></span>
+                        {this.props.children}
+                    </span>:<span />}
+                </span>
+                <FontAwesomeIcon icon={faQuestionCircle} onMouseOver={this.showTooltip} onMouseOut={this.hideTooltip}/>
+            </span>
+
         );
     }
 }