Add tooltip to web page debug

lbussy · Nov 28, 2020 · b315430 · b315430
1 parent c54f303
commit b315430
Show file tree

Hide file tree

Showing 2 changed files with 24 additions and 7 deletions.
diff --git a/TODO.md b/TODO.md
@@ -3,10 +3,6 @@
 ## Open
 
 - Change so that posting configuration changes is not a complete page reload
-- Add mouseover on debug items
-  - free = Total free bytes in the heap. Equivalent to multi_free_heap_size().
-	- max = Size of largest free block in the heap. This is the largest malloc-able size.
-	- frag = 100 - (max * 100) / free
 
 ## Complete
 
@@ -161,3 +157,7 @@
 - ~~Merge update pages~~
 - ~~Add ThingSpeak support~~
 - ~~Remove lockup if there's no time hack~~
+- ~~Add mouseover on debug items~~
+  - ~~free = Total free bytes in the heap. Equivalent to multi_free_heap_size().~~
+	- ~~max = Size of largest free block in the heap. This is the largest malloc-able size.~~
+	- ~~frag = 100 - (max * 100) / free~~
diff --git a/data/about.htm b/data/about.htm
@@ -43,6 +43,10 @@
             padding-right: 15px;
             padding-left: 15px;
         }
+
+        .tooltip-inner {
+            text-align: left;
+        }
     </style>
 
 </head>
@@ -99,15 +103,15 @@ <h4 class="card-title">About Brew Bubbles <span id="thisVersion">(version loadin
                     <ul class="list-group">
                         <li class="list-group-item d-flex justify-content-between align-items-center">
                             <strong>Uptime: </strong>
-                            <span id="uptime">...loading</span>
+                            <span id="uptime" data-html="true" data-toggle="tooltip">...loading</span>
                         </li>
                         <li class="list-group-item d-flex justify-content-between align-items-center">
                             <strong>Reset Reason: </strong>
-                            <span id="resetreason">...loading</span>
+                            <span id="resetreason" data-html="true" data-toggle="tooltip">...loading</span>
                         </li>
                         <li class="list-group-item d-flex justify-content-between align-items-center">
                             <strong>Heap Information: </strong>
-                            <span id="heap">...loading</span>
+                            <span id="heap" data-html="true" data-toggle="tooltip">...loading</span>
                         </li>
                     </ul>
                 </div>
@@ -142,6 +146,19 @@ <h4 class="card-title">About Brew Bubbles <span id="thisVersion">(version loadin
         else window.onload = loadPage;
 
         function loadPage() { // Load the page's JS elements
+            $(document).tooltip({ // Enable tooltips
+                'selector': '[data-toggle=tooltip]',
+                'toggleEnabled': true
+            });
+            var heapToolTip = "Heap Information:<br>";
+            heapToolTip += "<ul>";
+            heapToolTip += "<li>Free Heap = Total free bytes in the heap";
+            heapToolTip += "<li>Max = Size of largest free block in the heap";
+            heapToolTip += "<li>Frags = 100 - (max * 100) / free";
+            heapToolTip += "</ul>";
+            $("#uptime").attr("data-original-title", "Time since last controller (re)start");
+            $("#resetreason").attr("data-original-title", "Reason for last (re)start");
+            $("#heap").attr("data-original-title", heapToolTip);
             loadThisVersion();  // Populate form with controller settings
             loadUptime();       // Load uptime information
             loadHeap();         // Load heap information