Add informational tooltips to Category and Status column headers in XLS Standards website

site/assets/style.css

@@ -134,11 +134,13 @@ main {
 
 /* Standards table */
 .standards-table-container {
-  overflow: hidden;
+  overflow-x: auto;
+  overflow-y: visible;
   border: 1px solid var(--border-color);
   border-radius: 8px;
   margin-top: 32px;
   background: var(--bg-color-raised);
+  position: relative;
 }
 
 .standards-table {
@@ -167,6 +169,7 @@ main {
   text-align: left;
   transition: background-color 0.2s;
   user-select: none;
+  overflow: visible;
 }
 .standards-table th:hover {
   background: var(--color-gray-6);
@@ -812,3 +815,80 @@ footer {
 .contribute-content tr:last-child td {
   border-bottom: none;
 }
+
+/* Tooltip styles */
+.tooltip {
+  position: relative;
+  display: inline-block;
+  cursor: help;
+}
+
+.tooltip::after {
+  content: "?";
+  display: inline-block;
+  width: 14px;
+  height: 14px;
+  margin-left: 6px;
+  font-size: 10px;
+  font-weight: 600;
+  text-align: center;
+  line-height: 14px;
+  border-radius: 50%;
+  background: var(--color-gray-6);
+  color: var(--text-color);
+}
+
+/* Hide tooltip text by default */
+.tooltip .tooltip-text {
+  display: none;
+  position: fixed;
+  width: 300px;
+  background-color: var(--color-gray-7);
+  color: var(--text-color);
+  text-align: left;
+  border-radius: 6px;
+  padding: 12px;
+  z-index: 999999;
+  border: 1px solid var(--border-color);
+  font-size: 14px;
+  font-weight: 400;
+  line-height: 1.4;
+  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
+  pointer-events: none;
+}
+
+/* Tooltip arrow */
+.tooltip .tooltip-text::after {
+  content: "";
+  position: absolute;
+  top: 100%;
+  left: 50%;
+  margin-left: -5px;
+  border-width: 5px;
+  border-style: solid;
+  border-color: var(--color-gray-7) transparent transparent transparent;
+}
+
+/* Category-specific styling in tooltip text */
+.tooltip-category {
+  margin-bottom: 8px;
+}
+
+.tooltip-category strong {
+  color: var(--link-color);
+}
+
+.tooltip-status {
+  margin-bottom: 8px;
+}
+
+.tooltip-status strong {
+  color: var(--link-color);
+}
+
+/* Show tooltip on hover */
+.tooltip:hover .tooltip-text {
+  display: block;
+  visibility: visible;
+  opacity: 1;
+}

site/templates/category.html

@@ -1,6 +1,6 @@
-<!-- 
+<!--
     Category page template for XLS Standards website
-    
+
     Displays XLS standards filtered by category with:
     - Category-specific introduction and metadata
     - Interactive sortable table with all columns (except category since it's consistent)
@@ -73,7 +73,29 @@ <h3>Browse by Category:</h3>
         <th class="sortable" data-column="number">Number</th>
         <th class="sortable" data-column="title">Title</th>
         <th class="sortable" data-column="author">Author(s)</th>
-        <th class="sortable" data-column="status">Status</th>
+        <th class="sortable" data-column="status">
+          <span class="tooltip">
+            Status
+            <span class="tooltip-text">
+              <div class="tooltip-status">
+                <strong>Draft:</strong> Work in progress, subject to change and
+                further development.
+              </div>
+              <div class="tooltip-status">
+                <strong>Final:</strong> Completed and approved standard, ready
+                for implementation.
+              </div>
+              <div class="tooltip-status">
+                <strong>Stagnant:</strong> No longer actively developed or
+                maintained.
+              </div>
+              <div class="tooltip-status">
+                <strong>Withdrawn:</strong> Withdrawn from consideration and
+                will not be implemented.
+              </div>
+            </span>
+          </span>
+        </th>
         <th class="sortable" data-column="created">Created</th>
       </tr>
     </thead>
@@ -149,6 +171,38 @@ <h3>Browse by Category:</h3>
     const numberHeader = table.querySelector('th[data-column="number"]');
     if (numberHeader) numberHeader.classList.add("sort-desc");
 
+    // Tooltip positioning functionality
+    const tooltips = document.querySelectorAll(".tooltip");
+    tooltips.forEach((tooltip) => {
+      const tooltipText = tooltip.querySelector(".tooltip-text");
+      if (tooltipText) {
+        tooltip.addEventListener("mouseenter", function (e) {
+          // Get the position of the tooltip trigger
+          const rect = tooltip.getBoundingClientRect();
+
+          // Position the tooltip above the trigger, centered horizontally
+          const left = rect.left + rect.width / 2 - 150; // Center the 300px wide tooltip
+          const top = rect.top - 10; // 10px above the trigger
+
+          // Ensure tooltip stays within viewport bounds
+          const adjustedLeft = Math.max(
+            10,
+            Math.min(left, window.innerWidth - 310),
+          );
+          const adjustedTop = Math.max(10, top);
+
+          tooltipText.style.left = adjustedLeft + "px";
+          tooltipText.style.top = adjustedTop + "px";
+        });
+
+        tooltip.addEventListener("mouseleave", function (e) {
+          // Reset positioning to hide tooltip properly
+          tooltipText.style.left = "";
+          tooltipText.style.top = "";
+        });
+      }
+    });
+
     // Add click event listeners to all sortable headers
     headers.forEach((header) => {
       header.addEventListener("click", function () {

site/templates/index.html

@@ -1,6 +1,6 @@
-<!-- 
+<!--
     Index page template for XLS Standards website
-    
+
     Displays all XLS standards in a sortable table format with:
     - Introduction section with total count
     - Interactive sortable table with 4 columns (Number, Title, Author, Status)
@@ -50,9 +50,52 @@ <h3>Browse by Category:</h3>
         <!-- Sortable column headers with data attributes for JavaScript -->
         <th class="sortable" data-column="number">Number</th>
         <th class="sortable" data-column="title">Title</th>
-        <th class="sortable" data-column="category">Category</th>
+        <th class="sortable" data-column="category">
+          <span class="tooltip">
+            Category
+            <span class="tooltip-text">
+              <div class="tooltip-category">
+                <strong>Amendment:</strong> Changes to core XRP Ledger protocol
+                requiring network consensus and activation through the amendment
+                process.
+              </div>
+              <div class="tooltip-category">
+                <strong>Community:</strong> Best practices, conventions, and
+                guidelines for the XRP Ledger ecosystem that don't require
+                protocol changes.
+              </div>
+              <div class="tooltip-category">
+                <strong>Protocol:</strong> XRP Ledger APIs, formats, and
+                behaviors that don't require consensus changes but define how
+                applications interact with the network.
+              </div>
+            </span>
+          </span>
+        </th>
         <th class="sortable" data-column="author">Author(s)</th>
-        <th class="sortable" data-column="status">Status</th>
+        <th class="sortable" data-column="status">
+          <span class="tooltip">
+            Status
+            <span class="tooltip-text">
+              <div class="tooltip-status">
+                <strong>Draft:</strong> Work in progress, subject to change and
+                further development.
+              </div>
+              <div class="tooltip-status">
+                <strong>Final:</strong> Completed and approved standard, ready
+                for implementation.
+              </div>
+              <div class="tooltip-status">
+                <strong>Stagnant:</strong> No longer actively developed or
+                maintained.
+              </div>
+              <div class="tooltip-status">
+                <strong>Withdrawn:</strong> Withdrawn from consideration and
+                will not be implemented.
+              </div>
+            </span>
+          </span>
+        </th>
         <th class="sortable" data-column="created">Created</th>
       </tr>
     </thead>
@@ -139,6 +182,38 @@ <h3>Browse by Category:</h3>
     const numberHeader = table.querySelector('th[data-column="number"]');
     numberHeader.classList.add("sort-desc");
 
+    // Tooltip positioning functionality
+    const tooltips = document.querySelectorAll(".tooltip");
+    tooltips.forEach((tooltip) => {
+      const tooltipText = tooltip.querySelector(".tooltip-text");
+      if (tooltipText) {
+        tooltip.addEventListener("mouseenter", function (e) {
+          // Get the position of the tooltip trigger
+          const rect = tooltip.getBoundingClientRect();
+
+          // Position the tooltip above the trigger, centered horizontally
+          const left = rect.left + rect.width / 2 - 150; // Center the 300px wide tooltip
+          const top = rect.top - 10; // 10px above the trigger
+
+          // Ensure tooltip stays within viewport bounds
+          const adjustedLeft = Math.max(
+            10,
+            Math.min(left, window.innerWidth - 310),
+          );
+          const adjustedTop = Math.max(10, top);
+
+          tooltipText.style.left = adjustedLeft + "px";
+          tooltipText.style.top = adjustedTop + "px";
+        });
+
+        tooltip.addEventListener("mouseleave", function (e) {
+          // Reset positioning to hide tooltip properly
+          tooltipText.style.left = "";
+          tooltipText.style.top = "";
+        });
+      }
+    });
+
     // Add click event listeners to all sortable headers
     headers.forEach((header) => {
       header.addEventListener("click", function () {