Merge pull request #2273 from GSA/2200-contextual-tooltips

2200 - Adding tooltip to Total messages header for explanation

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

@@ -60,17 +60,6 @@ $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);
-  }
-}
-
 .progress-bar {
   width: 300px;
   height: 20px;

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,9 +27,20 @@
 {{ ajax_block(partials, updates_url, 'inbox') }}
 
 <div id="totalMessageChartContainer" data-messages-sent="{{ messages_sent }}" data-messages-remaining="{{ messages_remaining }}">
-    <h2 id="chartTitle">Total messages</h2>
-    <svg id="totalMessageChart"></svg>
-    <div id="message"></div>
+  <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"
+    >
+      <span class="usa-sr-only">More information</span>
+      i
+    </button>
+  </div>
+  <svg id="totalMessageChart"></svg>
+  <div id="message"></div>
 </div>
 <div id="totalMessageTable" class="margin-0"></div>