Replace power-tip in enterprises/edit/<name>/contact with floatingUI

app/views/admin/enterprises/form/_contact.html.haml

@@ -6,8 +6,8 @@
 .row
   .alpha.three.columns
     = f.label :email_address, t('.email_address')
-    %div{'ofn-with-tip' => t('.email_address_tip')}
-      %a= t('admin.whats_this')
+    = render partial: 'admin/shared/tooltip', locals: {tooltip_text: t('.email_address_tip')}
+
   .omega.eight.columns
     = f.text_field :email_address, { placeholder: t('.email_address_placeholder') }
 .row
@@ -18,8 +18,8 @@
 .row
   .alpha.three.columns
     = f.label :whatsapp_phone, t('.whatsapp_phone')
-    %div{'ofn-with-tip' => t('.whatsapp_phone_tip')}
-      %a= t('admin.whats_this')
+    = render partial: 'admin/shared/tooltip', locals: {tooltip_text: t('.whatsapp_phone_tip')}
+
   .omega.eight.columns
     = f.text_field :whatsapp_phone, { placeholder: t('.whatsapp_phone_placeholder') }
 .row

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

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

app/webpacker/controllers/tooltip_controller.js

@@ -0,0 +1,49 @@
+import { Controller } from "stimulus";
+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",
+    },
+  };
+
+  update() {
+    computePosition(this.elementTarget, this.tooltipTarget, {
+      placement: this.placementValue,
+      middleware: [offset(6), arrow({ element: this.arrowTarget })],
+    }).then(({ x, y, placement, middlewareData }) => {
+      Object.assign(this.tooltipTarget.style, {
+        left: `${x}px`,
+        top: `${y}px`,
+      });
+      const { x: arrowX, y: arrowY } = middlewareData.arrow;
+
+      const staticSide = {
+        top: "bottom",
+        right: "left",
+        bottom: "top",
+        left: "right",
+      }[placement.split("-")[0]];
+
+      Object.assign(this.arrowTarget.style, {
+        left: arrowX != null ? `${arrowX}px` : "",
+        top: arrowY != null ? `${arrowY}px` : "",
+        right: "",
+        bottom: "",
+        [staticSide]: "-4px",
+      });
+    });
+  }
+
+  showTooltip() {
+    this.tooltipTarget.style.display = "block";
+    this.update();
+  }
+
+  hideTooltip() {
+    this.tooltipTarget.style.display = "";
+  }
+}

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

@@ -2,3 +2,31 @@
   max-width: 240px;
   white-space: normal;
 }
+
+.tooltip {
+  display: none;
+  position: absolute;
+  top: 0;
+  left: 0;
+  font-size: 13px;
+  pointer-events: none;
+  background-color: #5498da;
+  padding: 5px 15px;
+  border-radius: 3px;
+  color: #fff;
+  max-width: 240px;
+  white-space: normal;
+}
+
+.arrow {
+  background-color: #5498da;
+  position: absolute;
+  width: 8px;
+  height: 8px;
+  transform: rotate(45deg);
+}
+
+.tooltip-container {
+  position: relative;
+  width: 240px;
+}