2200 - Adding tooltip to Total messages header for explanation

app/assets/sass/uswds/_data-visualization.scss

@@ -60,16 +60,16 @@ $failed: color('gray-cool-20');
   }
 }
 
-.usa-tooltip {
-  line-height: 1;
-  .usa-tooltip__body {
-    width: units(mobile);
-      font-size: size("body", 2);
-    height: auto;
-    white-space: wrap;
-    line-height: units(1);
-  }
-}
+// .usa-tooltip {
+//   line-height: 1;
+//   .usa-tooltip__body {
+//     width: units(mobile);
+//       font-size: size("body", 2);
+//     height: auto;
+//     white-space: wrap;
+//     line-height: units(1);
+//   }
+// }
 
 .progress-bar {
   width: 300px;

app/assets/sass/uswds/_uswds-theme-custom-styles.scss

@@ -552,6 +552,24 @@ td.table-empty-message {
   max-width: 100%;
 }
 
+.usa-tooltip {
+  &__information {
+    background: color('ink');
+    margin-top: 4px;
+    color: white;
+    border-radius: 50%;
+    height: units(3);
+    width: units(3);
+    border: 1px solid color('ink');
+  }
+  .usa-tooltip__body {
+    min-width: units('card-lg');
+    max-width: units('mobile');
+    white-space: normal;
+    word-wrap: break-word;
+  }
+}
+
 // Tabs
 
 .tabs {

app/templates/views/dashboard/dashboard.html

@@ -27,7 +27,17 @@
     {{ ajax_block(partials, updates_url, 'inbox') }}
 
     <div id="totalMessageChartContainer" data-sms-sent="{{ sms_sent }}" data-sms-allowance-remaining="{{ sms_allowance_remaining }}">
-      <h2 id="chartTitle">Total messages</h2>
+      <div class="grid-row flex-align-center">
+        <h2 id="chartTitle" class="margin-right-1">Total messages</h2>
+        <button
+          type="button"
+          class="usa-tooltip usa-tooltip__information margin-right-0"
+          data-position="top"
+          title="Total messages track the sum of messages for the service: pending, failed, or delivered"
+        >
+          i
+        </button>
+      </div>
       <svg id="totalMessageChart"></svg>
       <div id="message"></div>
     </div>