signal matrix tooltip

resolves #89

src/components/AddSignals.js

@@ -63,6 +63,8 @@ export default class AddSignals extends Component {
       signals = this.copySignals(props.message.frame.signals);
     }
 
+    this.highlightedSignalTooltipRef = React.createRef();
+
     this.state = {
       bits: [],
       signals,
@@ -484,7 +486,10 @@ export default class AddSignals extends Component {
     }
 
     return (
-      <div className="cabana-explorer-signals-matrix">
+      <div className="cabana-explorer-signals-matrix" onMouseMove={this.matrixMouseMove}>
+        {this.state.highlightedSignal &&
+          <p ref={this.highlightedSignalTooltipRef} className="cabana-explorer-signals-matrix-tooltip" />
+        }
         <table cellSpacing={0} onMouseLeave={this.resetDragState}>
           <tbody>{rows}</tbody>
         </table>
@@ -500,6 +505,16 @@ export default class AddSignals extends Component {
     });
   };
 
+  matrixMouseMove = (ev) => {
+    if (this.state.highlightedSignal && this.highlightedSignalTooltipRef.current) {
+      const tt = this.highlightedSignalTooltipRef.current;
+      const signal = this.state.signals[this.state.highlightedSignal];
+      tt.style.left = (ev.clientX + 15) + 'px';
+      tt.style.top = (ev.clientY + 5) + 'px';
+      tt.innerHTML = signal.name;
+    }
+  };
+
   onTentativeSignalChange = (signal) => {
     // Tentative signal changes are not propagated up
     // but their effects are displayed in the bitmatrix

src/components/Explorer/explorer.scss

@@ -177,6 +177,18 @@
         margin: 2% 0;
         width: 100%;
       }
+      &-tooltip {
+        position: absolute;
+        top: 0px;
+        left: 0px;
+        z-index: 10;
+        border-radius: 5px;
+        background-color: rgba(0, 0, 0, 0.2);
+        border: 1px solid rgba(0, 0, 0, 0.3);
+        margin: 0;
+        padding: 2px 5px;
+        font-size: 0.8em;
+      }
     }
     &-log {
       border-top: 1px solid $color-grey-30;