From da73edefb47044d41e8f8309e17374cadb2da741 Mon Sep 17 00:00:00 2001
From: zandercymatics <141044360+zandercymatics@users.noreply.github.com>
Date: Wed, 31 Jan 2024 10:31:43 -0700
Subject: [PATCH] Change style

---
 .../assets/sass/_theme/_buttons.scss          | 11 +++++-----
 src/registrar/templates/home.html             | 22 ++++++++++---------
 2 files changed, 17 insertions(+), 16 deletions(-)

diff --git a/src/registrar/assets/sass/_theme/_buttons.scss b/src/registrar/assets/sass/_theme/_buttons.scss
index 6aa2995fd..81ae2f0d7 100644
--- a/src/registrar/assets/sass/_theme/_buttons.scss
+++ b/src/registrar/assets/sass/_theme/_buttons.scss
@@ -133,10 +133,9 @@ a.usa-button--unstyled:visited {
   }
 }
 
-// TODO: find another file for this 
-.info-button span.usa-tooltip svg.usa-icon {
-  svg.usa-icon{
-    transform: translateY(2px) !important;
-    background: transparent;
-  }
+// TODO: find another file for this
+.info-tooltip { 
+  transform: translateY(4px) !important;
+  display: inline-block;
+  background: transparent;
 }
diff --git a/src/registrar/templates/home.html b/src/registrar/templates/home.html
index 60aa1cd55..dd7e70fbb 100644
--- a/src/registrar/templates/home.html
+++ b/src/registrar/templates/home.html
@@ -45,7 +45,7 @@
           </th>
           <td data-sort-value="{{ domain.expiration_date|date:"U" }}" data-label="Expires">{{ domain.expiration_date|date }}</td>
           <td data-label="Status">
-            <span class="usa-tooltip info-button"
+            <span class="usa-tooltip"
             data-position="top"
             title="{{domain.get_state_help_text}}"
             aria-ignore="true"
@@ -58,15 +58,17 @@
               {% else %}
                   {{ domain.state|capfirst }}
               {% endif %}
-            {# TODO: this tooltip should trigger on click, not hover. Better for access and works better button wise #}
-              <svg 
-                class="usa-icon usa-tooltip" role="img" 
-                data-position="top"
-                title="{{domain.get_state_help_text}}"
-                focusable="true"
-              >
-                <use xlink:href="{%static 'img/sprite.svg'%}#info_outline"></use>
-              </svg>
+              <span class="info-tooltip">
+                <svg 
+                  class="usa-icon usa-tooltip" 
+                  role="img" 
+                  data-position="top"
+                  title="{{domain.get_state_help_text}}"
+                  focusable="true"
+                >
+                  <use xlink:href="{%static 'img/sprite.svg'%}#info_outline"></use>
+                </svg>
+              </span>
             </span>
           </td>
           <td>