feat: less word clutter for a better UI

docs/index.html

@@ -67,14 +67,15 @@
       <p>
         Some departments have a space in the middle (e.g., "C S")
       </p>
+      <p>Course Name is optional, but used for duplicate ID courses (e.g. "UGS 303")</p>
       <br>
       <form action="">
         <!-- Data is separated into course number, course prefi;x, and course name-->
-        <label for="courseField">Department (e.g., "MUS"):</label>
+        <label for="courseField">Department (e.g. "MUS"):</label>
         <input type="text" id="courseField" name="fname" required><br><br>
-        <label for="courseNum">Course Number (e.g., "307"):</label>
+        <label for="courseNum">Course Number (e.g. "307"):</label>
         <input type="text" id="courseNum" name="fname" required><br><br>
-        <label for="courseName">Course Name (Optional, for same-number classes (e.g., "UGS 303")):</label>
+        <label for="courseName">Course Name (e.g. "JAZZ APPRECIATION-WB"):</label>
         <input type="text" id="courseName" name="fname"><br><br>
 
         <!-- <label for="sectionNum">Section Number (Optional, Experimental)</label>

docs/main.css

@@ -135,6 +135,45 @@ nav ul li a:hover {
     max-width: 800px;
 }
 
+.tooltip {
+    position: relative;
+    display: inline-block;
+    border-bottom: 1px dotted black;
+  }
+  
+.tooltip .tooltiptext {
+visibility: hidden;
+width: 120px;
+background-color: #555;
+color: #fff;
+text-align: center;
+border-radius: 6px;
+padding: 5px 0;
+position: absolute;
+z-index: 1;
+bottom: 125%;
+left: 50%;
+margin-left: -60px;
+opacity: 0;
+transition: opacity 0.3s;
+}
+
+.tooltip .tooltiptext::after {
+content: "";
+position: absolute;
+top: 100%;
+left: 50%;
+margin-left: -5px;
+border-width: 5px;
+border-style: solid;
+border-color: #555 transparent transparent transparent;
+}
+
+.tooltip:hover .tooltiptext {
+visibility: visible;
+opacity: 1;
+}
+
 .bg-form {
     background-color: var(--container-color);
     /* grid-column: 1;