From 4d324a336163ff0ff6642bc1f02f555c0e5445b9 Mon Sep 17 00:00:00 2001
From: cka-y <60586858+cka-y@users.noreply.github.com>
Date: Mon, 26 Jun 2023 15:10:54 -0400
Subject: [PATCH] feat: Provide an explanation to users about what a GTFS
 Component is #1505 (#1512)

* fix: display tooltip text

* feat: gtfs component description
---
 .../report/model/NoticeView.java              |  2 +-
 main/src/main/resources/report.html           | 21 ++++++++++++++++---
 2 files changed, 19 insertions(+), 4 deletions(-)

diff --git a/main/src/main/java/org/mobilitydata/gtfsvalidator/report/model/NoticeView.java b/main/src/main/java/org/mobilitydata/gtfsvalidator/report/model/NoticeView.java
index 1075a64c62..2bb68c0130 100644
--- a/main/src/main/java/org/mobilitydata/gtfsvalidator/report/model/NoticeView.java
+++ b/main/src/main/java/org/mobilitydata/gtfsvalidator/report/model/NoticeView.java
@@ -23,7 +23,7 @@ public NoticeView(ResolvedNotice<? extends Notice> notice) {
     this.notice = notice;
     this.json = notice.getContext().toJsonTree().getAsJsonObject();
     this.fields = new ArrayList<>(json.keySet());
-    this.comments = NoticeSchemaGenerator.loadComments(notice.getClass());
+    this.comments = NoticeSchemaGenerator.loadComments(notice.getContext().getClass());
   }
 
   /**
diff --git a/main/src/main/resources/report.html b/main/src/main/resources/report.html
index bf5637a664..b1d3d1eb40 100644
--- a/main/src/main/resources/report.html
+++ b/main/src/main/resources/report.html
@@ -73,6 +73,7 @@
     .summary-cell {
         padding: 5px;
         box-sizing: border-box;
+        flex: 1;
     }
 
     .summary h4 {
@@ -129,10 +130,19 @@
         position: absolute;
         z-index: 1;
         bottom: 100%;
-        left: 50%;
-        margin-left: -60px;
+        transform: translateX(-50%);
         opacity: 0;
         transition: opacity 0.3s;
+        max-width: 400px;
+        min-width: 100px;
+        width: max-content;
+        white-space: normal;
+    }
+
+    .tooltip {
+        position: relative;
+        display: inline-block;
+        cursor: help;
     }
 
     .tooltip:hover .tooltiptext {
@@ -262,7 +272,12 @@ <h4>Counts</h4>
                 </ul>
             </div>
             <div class="summary-cell summary_list">
-                <h4>GTFS Components included</h4>
+                <h4>
+                    GTFS Components included
+                    <a href="#" class="tooltip" onclick="event.preventDefault();"><span>(?)</span>
+                        <span class="tooltiptext" style="transform: translateX(-100%)">GTFS components provide a standardized vocabulary to define and describe features that are officially adopted in GTFS.</span>
+                    </a>
+                </h4>
                 <hr />
                 <div>
                     <span class="spec-feature" th:each="feature: ${metadata.specFeatures}" th:if="${feature.value == 'Yes'}" th:text="${feature.key}" />