Fix TOTP informational tooltip using design system tooltip

app/assets/stylesheets/_vendor.scss

@@ -1,5 +1,3 @@
-@import 'hint.css/hint';
-
 @import 'basscss-sass/defaults';
 @import 'basscss-sass/base-reset';
 @import 'basscss-sass/base-forms';

app/assets/stylesheets/components/_help-tooltip.scss

@@ -0,0 +1,13 @@
+.help-tooltip__button {
+  border-radius: 50%;
+}
+
+.help-tooltip__icon {
+  @include u-display('block');
+  @include u-text('middle');
+}
+
+.help-tooltip .usa-tooltip__body {
+  @include u-width('card-lg');
+  @include u-text('center', 'wrap');
+}

app/assets/stylesheets/components/all.scss

@@ -11,6 +11,7 @@
 @import 'file-input';
 @import 'footer';
 @import 'form';
+@import 'help-tooltip';
 @import 'icon';
 @import 'intl-tel-input';
 @import 'list';
@@ -22,7 +23,6 @@
 @import 'profile-section';
 @import 'personal-key';
 @import 'position';
-@import 'tooltip';
 @import 'util';
 @import 'verification-badge';
 @import 'spinner-button';

app/helpers/application_helper.rb

@@ -15,16 +15,6 @@ def step_class(step, active)
     end
   end
 
-  def tooltip(text)
-    content_tag(
-      :span, \
-      image_tag(asset_url('tooltip.svg'), width: 16, class: 'px1 img-tooltip'), \
-      class: 'hint--top hint--no-animate', \
-      'aria-label': text, \
-      'tabindex': '0',
-    )
-  end
-
   def sp_session
     session.fetch(:sp, {})
   end

app/javascript/app/components/index.js

@@ -1,9 +1,9 @@
-import { accordion, accordionCloseButton, banner, navigation } from 'identity-style-guide';
+import { accordion, accordionCloseButton, banner, navigation, tooltip } from 'identity-style-guide';
 import domready from 'domready';
 import Modal from './modal';
 
 window.LoginGov = window.LoginGov || {};
 window.LoginGov.Modal = Modal;
 
-const components = [accordion, accordionCloseButton, banner, navigation];
+const components = [accordion, accordionCloseButton, banner, navigation, tooltip];
 domready(() => components.forEach((component) => component.on()));

app/presenters/two_factor_auth_code/authenticator_delivery_presenter.rb

@@ -8,7 +8,7 @@ def help_text
       t("instructions.mfa.#{two_factor_authentication_method}.confirm_code_html",
         email: content_tag(:strong, user_email),
         app: content_tag(:strong, APP_NAME),
-        tooltip: view.tooltip(t('tooltips.authentication_app')))
+        tooltip: view.render('shared/help-tooltip') { t('tooltips.authentication_app') })
     end
 
     def fallback_question

app/views/shared/_help-tooltip.html.erb

@@ -0,0 +1,30 @@
+<%#
+yields: tooltip text
+%>
+<%= tag.button(
+  type: 'button',
+  class: 'help-tooltip__button usa-button usa-tooltip usa-button--unstyled',
+  data: {
+    position: 'top',
+    classes: 'help-tooltip'
+  },
+  aria: {
+    label: t('tooltips.trigger_label')
+  },
+  title: yield,
+) do %>
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="20"
+    height="20"
+    viewBox="0 0 24 24"
+    role="img"
+    alt=""
+    class="help-tooltip__icon"
+  >
+    <path
+      d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 17h-2v-2h2v2zm2.07-7.75l-.9.92C13.45 12.9 13 13.5 13 15h-2v-.5c0-1.1.45-2.1 1.17-2.83l1.24-1.26c.37-.36.59-.86.59-1.41 0-1.1-.9-2-2-2s-2 .9-2 2H8c0-2.21 1.79-4 4-4s4 1.79 4 4c0 .88-.36 1.68-.93 2.25z"
+      fill="currentColor"
+    ></path>
+  </svg>
+<% end %>

config/locales/tooltips/en.yml

@@ -4,3 +4,4 @@ en:
     authentication_app: An authentication application is a mobile security app that
       generates security codes even if you don't have an Internet connection or cellular
       service.
+    trigger_label: More information

config/locales/tooltips/es.yml

@@ -4,3 +4,4 @@ es:
     authentication_app: Una app de autenticación es una app de seguridad móvil que
       genera códigos de seguridad, incluso si no tiene una conexión de internet o
       un servicio celular.
+    trigger_label: Más información

config/locales/tooltips/fr.yml

@@ -4,3 +4,4 @@ fr:
     authentication_app: Une application d'authentification est une application de
       sécurité mobile qui génère des codes de sécurité même si vous n'avez pas de
       connexion internet ou de service cellulaire.
+    trigger_label: Plus d'information

package.json

@@ -23,7 +23,6 @@
     "clipboard": "^1.6.1",
     "domready": "^1.0.8",
     "focus-trap": "^6.1.3",
-    "hint.css": "^2.3.2",
     "identity-style-guide": "^3.0.0",
     "intl-tel-input": "^16.0.7",
     "libphonenumber-js": "^1.7.26",

spec/helpers/application_helper_spec.rb

@@ -9,18 +9,6 @@
     end
   end
 
-  describe '#tooltip' do
-    it 'creates a span containing aria label with text and image' do
-      tooltip_text = 'foobar'
-
-      html = helper.tooltip(tooltip_text)
-
-      expect(html).to have_css('.hint--top')
-      expect(html).to have_selector('img')
-      expect(html).to have_xpath("//span[@aria-label='#{tooltip_text}']")
-    end
-  end
-
   describe '#session_with_trust?' do
     context 'no user present and page is not one with trust' do
       before do

spec/views/shared/_help-tooltip.html.erb_spec.rb

@@ -0,0 +1,10 @@
+require 'rails_helper'
+
+describe 'shared/_help-tooltip.html.erb' do
+  it 'renders with block as USWDS tooltip' do
+    tooltip_text = 'foo "bar"'
+    render('shared/help-tooltip') { tooltip_text }
+
+    expect(rendered).to have_css(".help-tooltip__button[title='#{tooltip_text}']")
+  end
+end

spec/views/two_factor_authentication/totp_verification/show.html.erb_spec.rb

@@ -54,7 +54,7 @@
 
   it 'displays a helpful tooltip to the user' do
     tooltip = t('tooltips.authentication_app')
-    expect(rendered).to have_xpath("//span[@aria-label=\"#{tooltip}\"]")
+    expect(rendered).to have_xpath("//button[@title=\"#{tooltip}\"]")
   end
 
   context 'user is reauthenticating' do

yarn.lock

@@ -4680,11 +4680,6 @@ hex-color-regex@^1.1.0:
   resolved "https://registry.yarnpkg.com/hex-color-regex/-/hex-color-regex-1.1.0.tgz#4c06fccb4602fe2602b3c93df82d7e7dbf1a8a8e"
   integrity sha512-l9sfDFsuqtOqKDsQdqrMRk0U85RZc0RtOR9yPI7mRVOa4FsR/BVnZ0shmQRM96Ji99kYZP/7hn1cedc1+ApsTQ==
 
-hint.css@^2.3.2:
-  version "2.6.0"
-  resolved "https://registry.yarnpkg.com/hint.css/-/hint.css-2.6.0.tgz#cd6bbe25e2bc16a6454765d9559ad7bd035b3cf5"
-  integrity sha512-SnCLQOoPQt4fuHbOOvEL3UZwL0SPFtKMN4YIxAvBTe4oFUtBAT4R2Kk1uk3x5hgN+0xzOb6LFEQf5StbYfNm8w==
-
 hmac-drbg@^1.0.0:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/hmac-drbg/-/hmac-drbg-1.0.1.tgz#d2745701025a6c775a6c545793ed502fc0c649a1"