Add Stimulus controllers for tooltips

app/components/question_component/question_component.html.haml

@@ -6,12 +6,15 @@
   .flex-grow-1
     %h6.text-muted.question__user
       - if @question.author_is_anonymous
-        %i.fas.fa-user-secret{ title: t(".anon_hint") }
+        %span{ title: t(".anon_hint"), data: { controller: :tooltip, bs_placement: :bottom } }
+          %i.fas.fa-user-secret
       - if @profile_question && @question.direct
         - if user_signed_in? && @question.user == current_user
-          %i.fa.fa-eye-slash{ data: { bs_toggle: "tooltip", bs_title: t(".visible_to_you") } }
+          %span.d-inline-block{ title: t(".visible_to_you"), data: { controller: :tooltip, bs_placement: :bottom } }
+            %i.fa.fa-eye-slash
         - elsif moderation_view?
-          %i.fa.fa-eye-slash{ data: { bs_toggle: "tooltip", bs_title: t(".visible_mod_mode") } }
+          %span{ title: t(".visible_mod_mode"), data: { controller: :tooltip, bs_placement: :bottom } }
+            %i.fa.fa-eye-slash
       = user_screen_name(@question.user, context_user: @context_user, author_identifier: author_identifier)
       - if follower_question?
         ·

app/helpers/bootstrap_helper.rb

@@ -69,7 +69,7 @@ def list_group_item(body, path, options = {})
   end
 
   def tooltip(body, tooltip_content, placement = "bottom")
-    content_tag(:span, body, { :title => tooltip_content, "data-bs-toggle" => "tooltip", "data-bs-placement" => placement })
+    content_tag(:span, body, { :title => tooltip_content, "data-controller" => "tooltip", "data-bs-placement" => placement })
   end
 
   def time_tooltip(subject, placement = "bottom")

app/javascript/retrospring/controllers/tooltip_controller.ts

@@ -0,0 +1,8 @@
+import { Controller } from '@hotwired/stimulus';
+import { Tooltip } from 'bootstrap';
+
+export default class extends Controller {
+  connect(): void {
+    new Tooltip(this.element);
+  }
+}

app/javascript/retrospring/initializers/bootstrap.ts

@@ -8,9 +8,6 @@ import * as bootstrap from 'bootstrap';
  */
 export default function (): void {
   document.addEventListener('turbo:load', () => {
-    const tooltipTriggerList = document.querySelectorAll('[data-bs-toggle="tooltip"]');
-    [...tooltipTriggerList].map(tooltipTriggerEl => new bootstrap.Tooltip(tooltipTriggerEl));
-
     const dropdownElementList = document.querySelectorAll('[data-bs-toggle="dropdown"]');
     [...dropdownElementList].map(dropdownToggleEl => new bootstrap.Dropdown(dropdownToggleEl));
 

app/javascript/retrospring/initializers/stimulus.ts

@@ -17,6 +17,7 @@ import ShareController from "retrospring/controllers/share_controller";
 import ClipboardController from "retrospring/controllers/clipboard_controller";
 import QuestionboxFocusController from "retrospring/controllers/questionbox_focus_controller";
 import ReactionController from "retrospring/controllers/reaction_controller";
+import TooltipController from "retrospring/controllers/tooltip_controller";
 
 /**
  * This module sets up Stimulus and our controllers
@@ -45,4 +46,5 @@ export default function (): void {
   window['Stimulus'].register('clipboard', ClipboardController);
   window['Stimulus'].register('questionbox-focus', QuestionboxFocusController);
   window['Stimulus'].register('reaction', ReactionController);
+  window['Stimulus'].register('tooltip', TooltipController);
 }

app/views/answerbox/_smiles.html.haml

@@ -8,5 +8,5 @@
       - a.smiles.all.each do |smile|
         %a{ href: user_path(smile.user),
           title: user_screen_name(smile.user, url: false),
-          data: { bs_toggle: :tooltip, bs_placement: :top, smile_id: smile.id, turbo: :false } }
+          data: { controller: :tooltip, bs_placement: :top, smile_id: smile.id, turbo: :false } }
           = render AvatarComponent.new(user: smile.user, size: "xs")

app/views/navigation/_desktop.html.haml

@@ -15,7 +15,7 @@
         = nav_entry t("navigation.discover"), discover_path, icon: "compass", hotkey: "g d"
     %ul.nav.navbar-nav
       - if @user.present? && @user != current_user
-        %li.nav-item.d-none.d-sm-block{ data: { bs_toggle: 'tooltip', bs_placement: 'bottom' }, title: t(".list") }
+        %li.nav-item.d-none.d-sm-block{ data: { controller: 'tooltip', bs_placement: 'bottom' }, title: t(".list") }
           %a.nav-link{ href: '#', data: { bs_target: '#modal-list-memberships', bs_toggle: :modal } }
             %i.fa.fa-list.hidden-xs
             %span.d-none.d-sm-inline.d-md-none= t(".list")
@@ -29,7 +29,7 @@
             - cache current_user.notification_dropdown_cache_key, expires_in: 12.hours do
               - notifications = Notification.for(current_user).where(new: true).includes([:target]).limit(4)
               = render "navigation/dropdown/notifications", notifications:, size: "desktop"
-      %li.nav-item.d-none.d-sm-block{ data: { bs_toggle: 'tooltip', bs_placement: 'bottom' }, title: t('.ask_question') }
+      %li.nav-item.d-none.d-sm-block{ data: { controller: :tooltip, bs_placement: 'bottom' }, title: t('.ask_question') }
         %a.nav-link{ href: "#", name: "toggle-all-ask", data: { bs_target: "#modal-ask-followers", bs_toggle: :modal, hotkey: "n" } }
           %i.fa.fa-pencil-square-o
       %li.nav-item.dropdown.profile--image-dropdown

app/views/tabs/_feed.html.haml

@@ -17,7 +17,7 @@
         - else
           %p.px-4.pb-2
             - list.members.each do |member|
-              %a{ href: user_path(member.user), title: member.user.screen_name, data: { bs_toggle: :tooltip, bs_placement: :top } }
+              %a{ href: user_path(member.user), title: member.user.screen_name, data: { controller: :tooltip, bs_placement: :top } }
                 = render AvatarComponent.new(user: member.user, size: "xs")
       - if !list && lists.empty?
         .p-3= t(".lists.notice_html")

spec/helpers/bootstrap_helper_spec.rb

@@ -93,7 +93,7 @@
 
   describe "#tooltip" do
     it "should return the proper markup" do
-      expect(tooltip("Example Text", "This is in a tooltip")).to eq("<span title=\"This is in a tooltip\" data-bs-toggle=\"tooltip\" data-bs-placement=\"bottom\">Example Text</span>")
+      expect(tooltip("Example Text", "This is in a tooltip")).to eq("<span title=\"This is in a tooltip\" data-controller=\"tooltip\" data-bs-placement=\"bottom\">Example Text</span>")
     end
   end
 
@@ -103,7 +103,7 @@
         @user = FactoryBot.create(:user)
         travel 10.minutes
 
-        expect(time_tooltip(@user)).to eq("<span title=\"January 01, 1984 00:00\" data-bs-toggle=\"tooltip\" data-bs-placement=\"bottom\">10m</span>")
+        expect(time_tooltip(@user)).to eq("<span title=\"January 01, 1984 00:00\" data-controller=\"tooltip\" data-bs-placement=\"bottom\">10m</span>")
       end
     end
   end