add help for netmap

Netdisco/public/css/netdisco.css

@@ -5,12 +5,6 @@ body {
   padding-top: 50px;
 }
 
-/* TODO
-::selection {
-  background: transparent;
-}
-*/
-
 /* magnifying glass icon for search box */
 .navbar_icon {
   vertical-align: sub;

Netdisco/views/ajax/device/netmap.tt

@@ -1,7 +1,25 @@
+<div id="netmaphelp" style="text-align: center;">
+<button
+  class="btn btn-small btn-info" rel="popover"
+  data-title="Neighbor Map Controls"
+  data-html="true"
+  data-content="
+    <ul>
+      <li>Click and drag to pan</li>
+      <li>Mouse-wheel scroll to zoom</li>
+      <li>Hover to hightlight neighbors</li>
+      <li>Click to view device's map</li>
+    </ul>"
+  data-placement='top' data-trigger='click'>
+    Help
+</button>
+</div>
+
 <script>
 
 var winHeight = window.innerHeight;
 var winWidth  = window.innerWidth;
+var helpHeight = document.getElementById("netmaphelp").getBoundingClientRect().height;
 
 var tree = d3.layout.tree()
     .size([360, winHeight])
@@ -20,9 +38,9 @@ var loc = {};
 var neighbors_data = {};
 
 // main SVG background, with support for pan/zoom
-var svg = d3.select("#netmap_pane").append("svg")
+var svg = d3.select("#netmap_pane").insert("svg", "#netmaphelp")
     .attr("width", winWidth - 50)
-    .attr("height", winHeight - 100)
+    .attr("height", winHeight - (110 + helpHeight))
     .attr("pointer-events", "all")
   .append('g')
     .call(d3.behavior.zoom().on("zoom", redraw))

Netdisco/views/js/device.js

@@ -72,8 +72,9 @@
       }
     });
 
-    // activate tooltips
+    // activate tooltips and popovers
     $("[rel=tooltip]").tooltip({live: true});
+    $("[rel=popover]").popover({live: true});
   }
 
   $(document).ready(function() {