Replace angular ofn-with-tip directive on capture/ship buttons

app/views/admin/shared/_tooltip.html.haml

@@ -1,5 +1,6 @@
 %div{"data-controller": "tooltip"}
-  %a{"data-tooltip-target": "element", "data-action": "mouseenter->tooltip#showTooltip mouseleave->tooltip#hideTooltip"}= t('admin.whats_this')
+  %a{"data-tooltip-target": "element"}
+    = t('admin.whats_this')
   .tooltip-container
     .tooltip{"data-tooltip-target": "tooltip"}
       = sanitize tooltip_text

app/views/spree/admin/orders/_table_row.html.haml

@@ -43,6 +43,11 @@
           %i.success.icon-ok-sign{"data-controller": "ephemeral"}
       %a.icon_link.with-tip.icon-edit.no-text{href: edit_admin_order_path(order), 'ofn-with-tip' => t('spree.admin.orders.index.edit')}
       - if order.ready_to_ship?
-        %button.icon-road.icon_link.with-tip.no-text{"data-reflex": "click->Admin::OrdersReflex#ship", "data-id": order.id.to_s, 'ofn-with-tip' => t('spree.admin.orders.index.ship')}
+        %div{ "data-controller": "tooltip", "data-tooltip-tip-value": t('spree.admin.orders.index.ship') }
+          %button.icon-road.icon_link.with-tip.no-text{"data-reflex": "click->Admin::OrdersReflex#ship", "data-id": order.id.to_s,
+          "data-tooltip-target": "element" }
+
       - if order.payment_required? && order.pending_payments.reject(&:requires_authorization?).any?
-        %button.icon-capture.icon_link.no-text{"data-reflex": "click->Admin::OrdersReflex#capture", "data-id": order.id.to_s, 'ofn-with-tip' => t('spree.admin.orders.index.capture')}
+        %div{ "data-controller": "tooltip", "data-tooltip-tip-value": t('spree.admin.orders.index.capture') }
+          %button.icon-capture.icon_link.no-text{"data-reflex": "click->Admin::OrdersReflex#capture", "data-id": order.id.to_s,
+          "data-tooltip-target": "element" }

app/webpacker/controllers/tooltip_controller.js

@@ -4,12 +4,22 @@ import { computePosition, offset, arrow } from "@floating-ui/dom";
 export default class extends Controller {
   static targets = ["element", "tooltip", "arrow"];
   static values = {
-    placement: {
-      type: String,
-      default: "top",
-    },
+    tip: String,
+    placement: { type: String, default: "top" },
   };
 
+  connect() {
+    if (this.hasTipValue) { this.insertToolTipMarkup() }
+
+    this.elementTarget.addEventListener("mouseenter", this.showTooltip);
+    this.elementTarget.addEventListener("mouseleave", this.hideTooltip);
+  }
+
+  disconnect() {
+    this.elementTarget.removeEventListener("mouseenter", this.showTooltip);
+    this.elementTarget.removeEventListener("mouseleave", this.hideTooltip);
+  }
+
   update() {
     computePosition(this.elementTarget, this.tooltipTarget, {
       placement: this.placementValue,
@@ -38,12 +48,31 @@ export default class extends Controller {
     });
   }
 
-  showTooltip() {
+  showTooltip = () => {
     this.tooltipTarget.style.display = "block";
     this.update();
-  }
+  };
 
-  hideTooltip() {
+  hideTooltip = () => {
     this.tooltipTarget.style.display = "";
+  };
+
+  insertToolTipMarkup() {
+    let container = document.createElement("div");
+    let tooltip = document.createElement("div");
+    let arrow = document.createElement("div");
+    let text = document.createTextNode(this.tipValue);
+
+    container.classList.add("tooltip-container");
+    tooltip.classList.add("tooltip");
+    tooltip.setAttribute("data-tooltip-target", "tooltip");
+    arrow.classList.add("arrow");
+    arrow.setAttribute("data-tooltip-target", "arrow");
+
+    container.appendChild(tooltip);
+    tooltip.appendChild(text);
+    tooltip.appendChild(arrow);
+
+    this.elementTarget.appendChild(container);
   }
 }

app/webpacker/css/admin/components/tooltip.scss

@@ -28,5 +28,4 @@
 
 .tooltip-container {
   position: relative;
-  width: 240px;
 }