Merge "Add tooltips to check result section categories"
diff --git a/polygerrit-ui/app/elements/checks/gr-checks-results.ts b/polygerrit-ui/app/elements/checks/gr-checks-results.ts
index 71b8f33..50b5090 100644
--- a/polygerrit-ui/app/elements/checks/gr-checks-results.ts
+++ b/polygerrit-ui/app/elements/checks/gr-checks-results.ts
@@ -466,6 +466,21 @@
 SHOW_ALL_THRESHOLDS.set(Category.INFO, 5);
 SHOW_ALL_THRESHOLDS.set(Category.SUCCESS, 5);
 
+const CATEGORY_TOOLTIPS: Map<Category, string> = new Map();
+CATEGORY_TOOLTIPS.set(Category.ERROR, 'Must be fixed and is blocking submit');
+CATEGORY_TOOLTIPS.set(
+  Category.WARNING,
+  'Should be checked but is not blocking submit'
+);
+CATEGORY_TOOLTIPS.set(
+  Category.INFO,
+  'Does not have to be checked, for your information only'
+);
+CATEGORY_TOOLTIPS.set(
+  Category.SUCCESS,
+  'Successful runs without results and individual successful results'
+);
+
 @customElement('gr-checks-results')
 export class GrChecksResults extends GrLitElement {
   @query('#filterInput')
@@ -618,6 +633,9 @@
           height: var(--line-height-h3);
           margin-right: var(--spacing-s);
         }
+        .categoryHeader .statusIconWrapper {
+          display: inline-block;
+        }
         .categoryHeader .statusIcon {
           position: relative;
           top: 2px;
@@ -902,11 +920,16 @@
           @click="${() => this.toggleExpanded(category)}"
         >
           <iron-icon class="expandIcon" icon="${icon}"></iron-icon>
-          <iron-icon
-            icon="gr-icons:${iconForCategory(category)}"
-            class="statusIcon ${catString}"
-          ></iron-icon>
-          <span class="title">${catString}</span>
+          <div class="statusIconWrapper">
+            <iron-icon
+              icon="gr-icons:${iconForCategory(category)}"
+              class="statusIcon ${catString}"
+            ></iron-icon>
+            <span class="title">${catString}</span>
+            <paper-tooltip offset="5"
+              >${CATEGORY_TOOLTIPS.get(category)}</paper-tooltip
+            >
+          </div>
           <span class="count"
             >${this.renderCount(all, selected, filtered)}</span
           >