Add info tooltip to subnet generator on /tools

src/css/tools.css

@@ -40,6 +40,11 @@ body {
     border-top: none !important;
 }
 
+.tools span.hoverinfo {
+    font-size: 1.15em;
+    cursor: pointer;
+}
+
 @media (max-width: 767px) {
     .tools .row > div {
         padding: 0;
@@ -102,4 +107,15 @@ body {
 
 #subnet_out {
     white-space: pre-wrap;
+
+ }
+
+.tools .glyphicon-question-sign {
+    color: #ffffff;
+    cursor: default;
+    opacity: 0.25;
+}
+
+.tools .glyphicon-question-sign:hover {
+    opacity: 0.75;
 }

src/js/tools.js

@@ -24,6 +24,12 @@ subnetInput.oninput = subnetChanged;
 
 $(document).ready(function() {
 	randomChanged();
+   $("span.glyphicon-question-sign").each(function(k, el) {
+   $(el).attr("data-title", $(el).closest("tr").find("th").text()).popover({
+      placement: "auto right",
+      container: "body",
+   });
+   });
 });
 
 function expandChanged(e){

src/tools.html

@@ -92,6 +92,7 @@
 					<div class="col-md-6">
 						<div class="panel panel-default">
 							<div class="panel-heading">
+								<span class="glyphicon glyphicon-question-sign pull-right hoverinfo" data-toggle="popover" data-trigger="hover" data-content="Example usage: To generate a random /64 subnet out of fd00::/8, use fd00::/8/64 as input"></span>
 								<h3 class="panel-title">Random Subnet</h3>
 							</div>
 							<div class="panel-body">