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
ideacrew · Aug 6, 2024 · 2eed7d7 · 2eed7d7
1 parent a89ecdf
commit 2eed7d7
Show file tree

Hide file tree

Showing 4 changed files with 11 additions and 3 deletions.
diff --git 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
@@ -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
@@ -675,4 +675,4 @@ a.disabled {
     pointer-events: none;
     color: var(--grey-100);
   }
-}
+}
diff --git 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">
-Original file line number
+Diff line change
@@ Expand Up / @@ -675,4 +675,4 @@ a.disabled { @@
         pointer-events: none;
         color: var(--grey-100);
       }
-    }
+    }