feat(): add show/hide functionality to tooltip

src/features/tooltip/Tooltip.js

@@ -3,8 +3,9 @@ import { addNote, removeNote, getNotesIndexedByHash } from 'domain/notes';
 
 //Styling
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { faTrashAlt, faSave, faAngleDoubleDown, faAngleDoubleUp } from '@fortawesome/free-solid-svg-icons';
+import { faTrashAlt, faSave, faAngleDoubleDown, faAngleDoubleUp, faAngleDoubleRight, faAngleDoubleLeft} from '@fortawesome/free-solid-svg-icons';
 import appStyle from '../../App.module.css';
+import tooltipStyle from './Tooltip.module.css';
 
 ///Redux
 import { connect } from "react-redux";
@@ -27,6 +28,7 @@ class TooltipControls extends React.Component {
       width:"300px",
       position: [200,200],
       currentLabel:"",
+      show: true,
       note: {
         id:'',
         note:{
@@ -38,6 +40,12 @@ class TooltipControls extends React.Component {
     };
   }
 
+  handleShowHide = () => {
+    this.setState({
+      show: !this.state.show
+    });
+  }
+
   resetBuilder() {
     this.setState(this.initialState);
   }
@@ -114,16 +122,30 @@ class TooltipControls extends React.Component {
 
   render() {
     const style = {
-      display : 'block"',
-      position: "fixed",
-      top: `${10}px`,
-      right: `${10}px`,
-      boxShadow: `0 4px 8px 0 rgba(0,0,0,0.2)`,
-      transition: `0.3s`,
-      borderRadius: `10px`,
-      padding: `5px`,
-      background: `white`,
-      width:"290px"     
+      show:{
+        display : 'block"',
+        position: "fixed",
+        top: `${10}px`,
+        right: `${10}px`,
+        boxShadow: `0 4px 8px 0 rgba(0,0,0,0.2)`,
+        transition: `0.3s`,
+        borderRadius: `10px`,
+        padding: `5px`,
+        background: `white`,
+        width:"290px"  
+      },
+      hide:{
+        display : 'block"',
+        position: "fixed",
+        top: `${10}px`,
+        right: `${-275}px`,
+        boxShadow: `0 4px 8px 0 rgba(0,0,0,0.2)`,
+        transition: `0.3s`,
+        borderRadius: `10px`,
+        padding: `5px`,
+        background: `white`,
+        width:"290px"  
+      }
     }
 
     const inputStyle = {
@@ -137,10 +159,15 @@ class TooltipControls extends React.Component {
 
     const showNote = this.state.showNote;
 
+
     return (
       <>{this.props.data &&
-        <div style={style}>
+        <div style={ this.state.show ? style.show : style.hide }>
           {this.props.data && !this.props.data.fieldValue  &&
+            <>
+              <p >
+                  {!this.state.show && <div className={tooltipStyle.hidden}><FontAwesomeIcon onClick={this.handleShowHide} icon={faAngleDoubleLeft} /> </div>}{this.state.show && <FontAwesomeIcon  className={tooltipStyle.shown} onClick={this.handleShowHide} icon={faAngleDoubleRight} />}
+              </p>
               <div>
                 <p><b>UID: </b>{this.props.data.uid} </p>
                 <p><b>MAC: </b>{this.props.data.mac} </p>
@@ -155,6 +182,7 @@ class TooltipControls extends React.Component {
                 <p><b>OS Confidence: </b>{this.props.data.os.confidence} </p>
                 <p><b>Vendor: </b>{this.props.data.vendor} </p>
               </div>
+            </>
           }
           {this.props.data && this.props.data.fieldValue &&
             <div>

src/features/tooltip/Tooltip.module.css

@@ -0,0 +1,26 @@
+
+.shown {
+    transition: 1s;
+    line-height: 2.5rem;
+    text-align: center;
+    display: block;
+    font-weight: bold;
+}
+
+:global(.darkTheme) .shown {
+    background-color: #666666;
+}
+
+.hidden {
+    margin-left: -40px;
+    margin-top: 0%;
+    padding-right: 40px;
+    transition: 1s;
+    display : block;
+    position: fixed;
+    line-height: 2.5rem;
+    background-color: white !important;
+    border-radius: 10px;
+    box-shadow: 4px 0px 0px 0px rgba(0,0,0,0.2)
+
+}