Remove stimulus componenet, add popover controller

app/javascript/controllers/index.js

@@ -4,12 +4,10 @@
 import { Application } from "@hotwired/stimulus"
 import { definitionsFromContext } from "@hotwired/stimulus-webpack-helpers"
 import Carousel from 'stimulus-carousel'
-import {Popover} from 'stimulus-popover'
 
 
 const application = Application.start()
 application.register('carousel', Carousel)
-application.register('popover', Popover)
 const context = require.context("controllers", true, /_controller\.js$/)
 const contextComponents = require.context("../../components", true, /_controller\.js$/)
 application.load(

app/javascript/controllers/popover_controller.js

@@ -0,0 +1,17 @@
+import { Controller } from  "@hotwired/stimulus"
+
+export default class extends Controller {
+  static targets = [ "popover", "content", "card" ]
+
+  show() {
+    const templateContent = this.contentTarget.content
+    let content = document.importNode(templateContent, true)
+    this.popoverTarget.appendChild(content)
+  }
+
+  hide(){
+    this.cardTargets.forEach(card => {
+      card.remove()
+    })
+  }
+}

app/views/locations/show.html.slim

@@ -12,19 +12,25 @@ div class=""
         div
           - if @location.organization.verified?
             div class="flex justify-center items-center mb-2.5"
-              h5 class="text-lg font-bold text-center mb-1"
+              h5 class="mb-1 text-lg font-bold text-center"
                 = @location.name
-              = inline_svg_tag 'verified_nonprofit_check.svg', class: "w-4 h-4 ml-1"
+              div data-controller="popover"
+                span data-action="mouseenter->popover#show mouseleave->popover#hide" data-popover-target="popover"
+                  = inline_svg_tag 'verified_nonprofit_check.svg', class: "w-4 h-4 ml-1"
+                template data-popover-target="content"
+                  div data-popover-target="card" class="absolute px-3 py-1 mx-1 text-xs text-center text-white rounded-sm bg-gray-2 bg-opacity-90"
+                    p
+                      = "Information verified by nonprofit."
             p class="text-xs text-center font-base text-gray-4"
               = "This nonprofit has verified the listed information."
           - else
-            h5 class="text-lg font-bold text-center mb-1"
+            h5 class="mb-1 text-lg font-bold text-center"
               = @location.name
             p class="text-xs text-center font-base text-gray-4"
               = "This nonprofit has not yet verified the listed information."
 
           - if current_user.present? && policy(@location.organization).update?
-            p class="text-xs text-center font-base text-blue-500" id="pointer"
+            p class="text-xs text-center text-blue-500 font-base" id="pointer"
               = link_to "Edit My Nonprofit Page", edit_organization_path( @location.organization)
           // Designations
           = render DesignationTag::Component.new(@location.organization, container_options: { class: "justify-center items-center" })
@@ -45,7 +51,7 @@ div class=""
             = render SaveButton::Component.new(user: current_user, location: @location, simplified: true)
             span class="text-sm" aria-hidden="true" Save
 
-        div class="mt-10 mx-6 text-left"
+        div class="mx-6 mt-10 text-left"
           = render WorkingHours::Component.new(result: @location)
           - if @location.organization.irs_ntee_code.present?
             p class="text-sm leading-6 font-base text-gray-2"
@@ -54,7 +60,7 @@ div class=""
                 span class="font-normal"
                   = @location.organization.irs_ntee_code
         - if @location.images.attached?
-          div class="pt-4 px-6 border-t border-gray-8 mt-6"
+          div class="px-6 pt-4 mt-6 border-t border-gray-8"
             h4 class="text-sm font-bold text-black uppercase"
               | Photos
             = render DiscoverNonprofitCard::ImagesCarousel::Component.new(images: @location.images, \
@@ -130,7 +136,7 @@ div class=""
             div class="hidden"
                 div class="flex flex-col items-center gap-2 p-5 text-center bg-white rounded-6px" data-places-target="marker" data-latitude="#{@location.latitude}" data-longitude="#{@location.longitude}"
                   div
-                    a class="text-small font-bold text-gray-2"
+                    a class="font-bold text-small text-gray-2"
                       | #{@location.organization.name}
                     - if @location.organization.verified?
                       = inline_svg_tag 'verified_nonprofit_check.svg', class: "align-text-bottom inline w-4 h-4 ml-1"

package.json

@@ -18,7 +18,6 @@
     "postcss": "^8",
     "selectize": "0.12.4",
     "stimulus-carousel": "^4.0.0",
-    "stimulus-popover": "^6.2.0",
     "stimulus-use": "^0.50.0-2",
     "swiper": "6.8.4",
     "tailwindcss": "npm:@tailwindcss/postcss7-compat",