From 565e6ad509156bc515967da6f6d0de25445861e8 Mon Sep 17 00:00:00 2001
From: Jonathan Bobel <jonathan.bobel@gsa.gov>
Date: Fri, 17 Jan 2025 13:38:36 -0500
Subject: [PATCH 1/3] 2200 - Adding tooltip to Total messages header for
 explanation

---
 .../sass/uswds/_data-visualization.scss       | 20 +++++++++----------
 .../uswds/_uswds-theme-custom-styles.scss     | 18 +++++++++++++++++
 app/templates/views/dashboard/dashboard.html  | 12 ++++++++++-
 3 files changed, 39 insertions(+), 11 deletions(-)

diff --git a/app/assets/sass/uswds/_data-visualization.scss b/app/assets/sass/uswds/_data-visualization.scss
index e479334a3..af7782132 100644
--- a/app/assets/sass/uswds/_data-visualization.scss
+++ b/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;
diff --git a/app/assets/sass/uswds/_uswds-theme-custom-styles.scss b/app/assets/sass/uswds/_uswds-theme-custom-styles.scss
index 0bb1aab7e..c4e850839 100644
--- a/app/assets/sass/uswds/_uswds-theme-custom-styles.scss
+++ b/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 {
diff --git a/app/templates/views/dashboard/dashboard.html b/app/templates/views/dashboard/dashboard.html
index 04abe1afc..a51909340 100644
--- a/app/templates/views/dashboard/dashboard.html
+++ b/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>

From 935c5fd62c06d51a3ea846f45d7a491c7c801d5a Mon Sep 17 00:00:00 2001
From: Jonathan Bobel <jonathan.bobel@gsa.gov>
Date: Fri, 17 Jan 2025 13:54:13 -0500
Subject: [PATCH 2/3] Adding sr-only context to the tooltip

---
 app/templates/views/dashboard/dashboard.html | 1 +
 1 file changed, 1 insertion(+)

diff --git a/app/templates/views/dashboard/dashboard.html b/app/templates/views/dashboard/dashboard.html
index a51909340..50786f7cc 100644
--- a/app/templates/views/dashboard/dashboard.html
+++ b/app/templates/views/dashboard/dashboard.html
@@ -35,6 +35,7 @@
           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>

From f73fe7fc9a7d94a89406c2632e5b3c86cfa74880 Mon Sep 17 00:00:00 2001
From: Jonathan Bobel <jonathan.bobel@gsa.gov>
Date: Tue, 11 Mar 2025 14:09:22 -0400
Subject: [PATCH 3/3] Update _data-visualization.scss

Removing commented code
---
 app/assets/sass/uswds/_data-visualization.scss | 11 -----------
 1 file changed, 11 deletions(-)

diff --git a/app/assets/sass/uswds/_data-visualization.scss b/app/assets/sass/uswds/_data-visualization.scss
index af7782132..8cb9b1cdd 100644
--- a/app/assets/sass/uswds/_data-visualization.scss
+++ b/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;