Add tooltips to preview pane

monkey_island/cc/ui/src/components/preview-pane/PreviewPane.js

@@ -1,9 +1,18 @@
 import React from 'react';
 import {Icon} from 'react-fa';
 import Toggle from 'react-toggle';
+import {OverlayTrigger, Tooltip} from 'react-bootstrap';
 
 class PreviewPaneComponent extends React.Component {
 
+  generateToolTip(text) {
+    return (
+      <OverlayTrigger placement="top" overlay={<Tooltip id="tooltip">{text}</Tooltip>}>
+        <a><i className="glyphicon glyphicon-info-sign"/></a>
+      </OverlayTrigger>
+    );
+  }
+
   osRow(asset) {
     return (
       <tr>
@@ -34,7 +43,10 @@ class PreviewPaneComponent extends React.Component {
   accessibleRow(asset) {
     return (
       <tr>
-        <th>Accessible From</th>
+        <th>
+          Accessible From&nbsp;
+          {this.generateToolTip('List of machine which can access this one using a network protocol')}
+        </th>
         <td>{asset.accessible_from_nodes.map(val => <div key={val}>{val}</div>)}</td>
       </tr>
     );
@@ -63,10 +75,14 @@ class PreviewPaneComponent extends React.Component {
   forceKillRow(asset) {
     return (
       <tr>
-        <th>Force Kill</th>
+        <th>
+          Force Kill&nbsp;
+          {this.generateToolTip('If this is on, monkey will die next time it communicates')}
+        </th>
         <td>
           <Toggle id={asset.id} checked={!asset.config.alive} icons={false} disabled={asset.dead}
                   onChange={(e) => this.forceKill(e, asset)} />
+
         </td>
       </tr>
     );
@@ -79,7 +95,10 @@ class PreviewPaneComponent extends React.Component {
 
     return (
       <div>
-        <h4 style={{'marginTop': '2em'}}>Timeline</h4>
+        <h4 style={{'marginTop': '2em'}}>
+          Exploit Timeline&nbsp;
+          {this.generateToolTip('Timeline of exploit attempts. Red is successful. Gray is unsuccessful')}
+        </h4>
         <ul className="timeline">
           { asset.exploits.map(exploit =>
             <li key={exploit.timestamp}>