Merge pull request #9560 from binarygit/replace-tooltip

Replace tooltip on Enterprise Settings /contact page

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;
+}

package.json

@@ -36,6 +36,7 @@
   "license": "AGPL-3.0",
   "dependencies": {
     "@babel/preset-env": "^7.18.2",
+    "@floating-ui/dom": "^1.0.1",
     "@hotwired/turbo": "^7.1.0",
     "@rails/webpacker": "5.4.3",
     "babel-loader": "^8.2.3",

yarn.lock

@@ -1647,6 +1647,18 @@
   resolved "https://registry.yarnpkg.com/@discoveryjs/json-ext/-/json-ext-0.5.3.tgz#90420f9f9c6d3987f176a19a7d8e764271a2f55d"
   integrity sha512-Fxt+AfXgjMoin2maPIYzFZnQjAXjAL0PHscM5pRTtatFqB+vZxAM9tLp2Optnuw3QOQC40jTNeGYFOMvyf7v9g==
 
+"@floating-ui/core@^1.0.1":
+  version "1.0.1"
+  resolved "https://registry.npmjs.org/@floating-ui/core/-/core-1.0.1.tgz#00e64d74e911602c8533957af0cce5af6b2e93c8"
+  integrity sha512-bO37brCPfteXQfFY0DyNDGB3+IMe4j150KFQcgJ5aBP295p9nBGeHEs/p0czrRbtlHq4Px/yoPXO/+dOCcF4uA==
+
+"@floating-ui/dom@^1.0.1":
+  version "1.0.1"
+  resolved "https://registry.npmjs.org/@floating-ui/dom/-/dom-1.0.1.tgz#3321d4e799d6ac2503e729131d07ad0e714aabeb"
+  integrity sha512-wBDiLUKWU8QNPNOTAFHiIAkBv1KlHauG2AhqjSeh2H+wR8PX+AArXfz8NkRexH5PgMJMmSOS70YS89AbWYh5dA==
+  dependencies:
+    "@floating-ui/core" "^1.0.1"
+
 "@hotwired/stimulus-webpack-helpers@^1.0.0":
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/@hotwired/stimulus-webpack-helpers/-/stimulus-webpack-helpers-1.0.1.tgz#4cd74487adeca576c9865ac2b9fe5cb20cef16dd"