From 1b390fe2db3ed26937e293dd18867244b052dfef Mon Sep 17 00:00:00 2001
From: Laura Hausmann <laura@hausmann.dev>
Date: Sun, 2 May 2021 23:56:51 +0200
Subject: [PATCH] Add info tooltip to subnet generator on /tools

---
 src/css/tools.css | 60 ++++++++++++++++++++++++++++++-----------------
 src/js/tools.js   |  6 +++++
 src/tools.html    |  1 +
 3 files changed, 45 insertions(+), 22 deletions(-)

diff --git a/src/css/tools.css b/src/css/tools.css
index 07f9b99..f866508 100644
--- a/src/css/tools.css
+++ b/src/css/tools.css
@@ -9,22 +9,22 @@
 }
 
 body {
-	padding-top: 40px;
-	padding-bottom: 20px;
+    padding-top: 40px;
+    padding-bottom: 20px;
 }
 
 * {
-	font-family: "Noto Sans","Helvetica Neue",Helvetica,Arial,sans-serif;
+    font-family: "Noto Sans","Helvetica Neue",Helvetica,Arial,sans-serif;
 }
 
 .address {
-	color: #f3ff4f;
+    color: #f3ff4f;
 }
 
 .tools table {
-	table-layout: fixed;
-	font-size: 1em;
-	margin-bottom: 0;
+    table-layout: fixed;
+    font-size: 1em;
+    margin-bottom: 0;
 }
 
 .tools table td {
@@ -33,25 +33,30 @@ body {
 }
 
 .tools table .addr {
-	width: 100%;
+    width: 100%;
 }
 
 .tools table tr > * {
-	border-top: none !important;
+    border-top: none !important;
+}
+
+.tools span.hoverinfo {
+    font-size: 1.15em;
+    cursor: pointer;
 }
 
 @media (max-width: 767px) {
-	.tools .row > div {
-		padding: 0;
-	}
-	.tools .panel {
-		margin: 0;
-		border: none;
-	}
+    .tools .row > div {
+        padding: 0;
+    }
+    .tools .panel {
+        margin: 0;
+        border: none;
+    }
 
-	body {
-		padding-top: 25px;
-	}
+    body {
+        padding-top: 25px;
+    }
 }
 
 .address_in {
@@ -97,9 +102,20 @@ body {
 }
 
 .ptr {
-	font-size: 76%;
+    font-size: 76%;
 }
 
 #subnet_out {
-	white-space: pre-wrap;
-}
\ No newline at end of file
+    white-space: pre-wrap;
+
+ }
+
+.tools .glyphicon-question-sign {
+    color: #ffffff;
+    cursor: default;
+    opacity: 0.25;
+}
+
+.tools .glyphicon-question-sign:hover {
+    opacity: 0.75;
+}
diff --git a/src/js/tools.js b/src/js/tools.js
index 047285f..e355cb1 100644
--- a/src/js/tools.js
+++ b/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){
diff --git a/src/tools.html b/src/tools.html
index 21e174d..a2c55f9 100644
--- a/src/tools.html
+++ b/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">