From 2eed7d74ed1d9b127ae2c1cb18a7f0a062150e32 Mon Sep 17 00:00:00 2001
From: Charlie Parker <charlie.parker@ideacrew.com>
Date: Tue, 6 Aug 2024 10:43:06 -0400
Subject: [PATCH] bs4 fix sep tooltips (#4207)

* fix tooltip hide, update qle tooltip for bs4 to be right aligned, update js to hide tooltip on click

* use template instead of style to override broken fade
---
 app/assets/javascripts/qle.js.erb            | 1 +
 app/helpers/insured/families_helper.rb       | 5 +++--
 app/javascript/css/main.scss                 | 2 +-
 app/views/insured/families/find_sep.html.erb | 6 ++++++
 4 files changed, 11 insertions(+), 3 deletions(-)

diff --git a/app/assets/javascripts/qle.js.erb b/app/assets/javascripts/qle.js.erb
index 47988c3a663..ddd792335c5 100644
--- a/app/assets/javascripts/qle.js.erb
+++ b/app/assets/javascripts/qle.js.erb
@@ -154,6 +154,7 @@ $(function () {
     if (bs4) {
       $('#qle_submit').attr('disabled', 'disabled');
       $("#qle-details").get(0).scrollIntoView({behavior: 'smooth'});
+      $('.tooltip').remove();
     }
   });
 
diff --git a/app/helpers/insured/families_helper.rb b/app/helpers/insured/families_helper.rb
index d07426c0ff3..9239d843bc8 100644
--- a/app/helpers/insured/families_helper.rb
+++ b/app/helpers/insured/families_helper.rb
@@ -117,7 +117,7 @@ def render_product_type_details(metal_level_kind, nationwide)
   end
 
   def qle_link_generator(qle, index)
-    options = {class: 'qle-menu-item'}
+    options = {class: "qle-menu-item #{'pr-3' if @bs4}"}
     data = {
       title: qle.title, id: qle.id.to_s, label: qle.event_kind_label,
       is_self_attested: qle.is_self_attested,
@@ -127,7 +127,8 @@ def qle_link_generator(qle, index)
     }
 
     if qle.tool_tip.present?
-      data.merge!(toggle: 'tooltip', placement: index > 2 ? 'top' : 'bottom')
+      legacy_placement = index > 2 ? 'top' : 'bottom'
+      data.merge!(toggle: 'tooltip', placement: @bs4 ? 'right' : legacy_placement, trigger: 'hover')
       options.merge!(data: data, title: qle.tool_tip)
     else
       options.merge!(data: data)
diff --git a/app/javascript/css/main.scss b/app/javascript/css/main.scss
index b31d9c5fd82..22b8968804f 100644
--- a/app/javascript/css/main.scss
+++ b/app/javascript/css/main.scss
@@ -675,4 +675,4 @@ a.disabled {
     pointer-events: none;
     color: var(--grey-100);
   }
-}
+}
\ No newline at end of file
diff --git a/app/views/insured/families/find_sep.html.erb b/app/views/insured/families/find_sep.html.erb
index 5e31652dace..7a64cd00c06 100644
--- a/app/views/insured/families/find_sep.html.erb
+++ b/app/views/insured/families/find_sep.html.erb
@@ -59,6 +59,12 @@
       </div>
     </div>
   </div>
+  <script>
+    $(".qle-menu-item ").tooltip({
+      // need to define template to add 'show' class to override the tooltip's default 'fade' class which sets opacity: 0
+      template: '<div class="tooltip show" role="tooltip"><div class="tooltip-arrow"></div><div class="tooltip-inner"></div></div>'
+    });
+  </script>
 <% else %>
   <div class="container">
     <div class="row">