Issue #97, add explanation box - 2nd PR

frontend/src/base.html

@@ -135,6 +135,15 @@ <h2>
   {{#filters}}
   <input type="checkbox" name="{{ key }}" id="{{ key }}" {{#checked}}checked="checked"{{/checked}}>
   <label for="{{ key }}">{{ message }}</label>
+  {{#needs_explanation}}
+  <div class="tooltip">
+    <span class="questionbox">?</span>
+    <span class="tooltiptext">For JavaScript files, the top-level code is always covered if the file is loaded,
+      so we came up with a heuristic: a "zero coverage" file is a file which has at least one function and whose functions are all not covered.</br>
+      For C/C++ it's easier, as there's no top-level code and the code is always in functions.
+      In this case, a "zero coverage" file is a file which has no covered lines.</span>
+  </div>
+  {{/needs_explanation}}
   {{/filters}}
 
   <select name="last_push" id="last_push">

frontend/src/style.scss

@@ -394,3 +394,56 @@ $samp_size: 20px;
     float: right;
   }
 }
+
+// Tooltip container for explanation (issue #97 enhancement)
+#menu .tooltip {
+  position: relative;
+  display: inline-block;
+
+  // Question mark container
+  .questionbox {
+    text-align: center;
+    border-bottom: 1px dotted black;
+    cursor: default;
+  }
+
+  // Show the tooltip text when you mouse over the tooltip container
+  &:hover .tooltiptext {
+    visibility: visible;
+    opacity: 1;
+  }
+
+  .tooltiptext {
+    visibility: hidden;
+    line-height: 120%;
+    background-color: $default_color;
+    color: white;
+    text-align: left;
+    padding: 2vh 2vw;
+    border-radius: 6px;
+    box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.2);
+
+    // Position the tooltip
+    position: absolute;
+    z-index: 1;
+    width: 36vw;
+    top: 100%;
+    left: 50%;
+    margin-left: -20vw; // Use half of the width including left horizontal padding size i.e 36vw/2 + 2vw
+
+    &::after {
+      content: " ";
+      position: absolute;
+      bottom: 100%;  /* At the top of the tooltip */
+      left: 50%;
+      margin-left: -5px;
+      border-width: 5px;
+      border-style: solid;
+      border-color: transparent transparent $default_color transparent;
+    }
+
+    // Transition animation
+    opacity: 0;
+    transition: opacity 1s;
+  }
+}

frontend/src/zero_coverage_report.js

@@ -55,7 +55,8 @@ export function zeroCoverageMenu(route) {
       return {
         key,
         message: filter.name,
-        checked: isEnabled(key)
+        checked: isEnabled(key),
+        needs_explanation: key === "completely_uncovered"
       };
     }),
     last_pushes: Object.entries(ZERO_COVERAGE_PUSHES).map(