Merge pull request #852 from amatsuda/bs5_popover

Globally initialize popovers by Bootstrap 5

Author: amatsuda

app/javascript/application.js

@@ -12,6 +12,9 @@ document.addEventListener('DOMContentLoaded', () => {
   document.querySelectorAll('[data-bs-toggle="tooltip"]').forEach(el => {
     new bootstrap.Tooltip(el)
   })
+  document.querySelectorAll('[data-bs-toggle="popover"]').forEach(el => {
+    new bootstrap.Popover(el)
+  })
 })
 
 import "@hotwired/turbo-rails"

app/javascript/controllers/index.js

@@ -36,7 +36,6 @@ import MultiselectController from "./multiselect_controller"
 import NestedFormController from "./nested_form_controller"
 import NextProposalController from "./next_proposal_controller"
 import NotificationsChannelController from "./notifications_channel_controller"
-import PopoverController from "./popover_controller"
 import ProgramSessionsController from "./program_sessions_controller"
 import ProposalPreviewController from "./proposal_preview_controller"
 import ProposalSelectController from "./proposal_select_controller"
@@ -86,7 +85,6 @@ application.register("multiselect", MultiselectController)
 application.register("nested-form", NestedFormController)
 application.register("next-proposal", NextProposalController)
 application.register("notifications-channel", NotificationsChannelController)
-application.register("popover", PopoverController)
 application.register("program-sessions", ProgramSessionsController)
 application.register("proposal-preview", ProposalPreviewController)
 application.register("proposal-select", ProposalSelectController)

app/javascript/controllers/popover_controller.js

@@ -72,7 +72,7 @@
             %i.fa.fa-envelope
             %h3
               Notifications
-              %span.ms-2{role: 'button', data: {controller: 'popover', bs_toggle: 'popover', bs_placement: 'left', bs_content: notification_preferences_tooltip, bs_html: 'true'}}
+              %span.ms-2{role: 'button', data: {bs_toggle: 'popover', bs_placement: 'left', bs_content: notification_preferences_tooltip, bs_html: 'true'}}
                 %i.fa.fa-question-circle
           .widget-content
             = f.simple_fields_for :teammates do |fields|

app/views/profiles/edit.html.haml

@@ -5,7 +5,7 @@
       = simple_form_for [event, :staff, proposal, rating], data: {rating_target: 'form', turbo_frame: dom_id(proposal, :rating_widget), remote: false} do |f|
         = program_tracker
         - unless disabled
-          %span.me-2{role: 'button', id: 'rating-tooltip-toggle', data: {controller: 'popover', bs_toggle: 'popover', bs_placement: 'left', bs_content: rating_tooltip, bs_html: 'true'}}
+          %span.me-2{role: 'button', id: 'rating-tooltip-toggle', data: {bs_toggle: 'popover', bs_placement: 'left', bs_content: rating_tooltip, bs_html: 'true'}}
             %i.fa.fa-question-circle
         = f.label :score, "Rating"
         .rating-form-wrapper