Issue #97, add explanation box - 2nd PR

frontend/src/base.html

@@ -135,6 +135,13 @@ <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 <strong>JavaScript</strong>, files with at least one function where all functions are uncovered.
+      <br />For <strong>C/C++/other languages</strong>, files which have 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: 1vh 1vw;
+    border-radius: 6px;
+    box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.2);
+
+    // Position the tooltip
+    position: absolute;
+    z-index: 1;
+    width: 30vw;
+    top: 100%;
+    left: 50%;
+    margin-left: -16vw; // Use half of the width including left horizontal padding size i.e 30vw/2 + 1vw
+
+    &::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(