diff --git a/app/assets/sass/uswds/_data-visualization.scss b/app/assets/sass/uswds/_data-visualization.scss index e479334a3..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; diff --git a/app/assets/sass/uswds/_uswds-theme-custom-styles.scss b/app/assets/sass/uswds/_uswds-theme-custom-styles.scss index ebce95061..3a10a6042 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 15df829f3..e22d49dc3 100644 --- a/app/templates/views/dashboard/dashboard.html +++ b/app/templates/views/dashboard/dashboard.html @@ -27,9 +27,20 @@ {{ ajax_block(partials, updates_url, 'inbox') }}
-

Total messages

- -
+
+

Total messages

+ +
+ +