Merge pull request #1017 from OpenFn/972-fix-credential-tooltip

Fix cutting-off tooltips

CHANGELOG.md

@@ -17,16 +17,19 @@ and this project adheres to
 
 ### Fixed
 
+- Tooltip for credential select in Job Edit form is cut off
+  [#972](https://github.com/OpenFn/Lightning/issues/972)
+
 ## [v0.7.2] - 2023-08-10
 
 ### Added
 
 ### Changed
 
-### Fixed
-
 - NodeJs security patch [1009](https://github.com/OpenFn/Lightning/pull/1009)
 
+### Fixed
+
 ## [v0.7.1] - 2023-08-04
 
 ### Added

assets/css/app.css

@@ -108,6 +108,15 @@
   animation: 0.2s ease-out 0s normal forwards 1 fade-out-keys;
 }
 
+div[id^='tippy-'] {
+  color: rgb(241 245 249);
+  background: rgb(15 23 42);
+  border-radius: 0.375rem;
+  padding: 0.5rem;
+  z-index: 9999;
+  margin: 2px;
+}
+
 @keyframes fade-in-scale-keys {
   0% {
     scale: 0.95;

assets/js/app.js

@@ -25,7 +25,7 @@ import { Socket } from 'phoenix';
 import { LiveSocket } from 'phoenix_live_view';
 
 import topbar from '../vendor/topbar';
-import { AssocListChange, Copy, Flash, SubmitViaCtrlS } from './hooks';
+import { AssocListChange, Copy, Flash, SubmitViaCtrlS, Tooltip } from './hooks';
 import JobEditor from './job-editor';
 import JobEditorResizer from './job-editor-resizer/mount';
 import TabSelector from './tab-selector';
@@ -37,6 +37,7 @@ let Hooks = {
   JobEditorResizer,
   WorkflowEditor,
   Flash,
+  Tooltip,
   AssocListChange,
   Copy,
   SubmitViaCtrlS,

assets/js/hooks/index.ts

@@ -1,3 +1,4 @@
+import tippy, { Instance as TippyInstance } from 'tippy.js';
 import { PhoenixHook } from './PhoenixHook';
 
 export const Flash = {
@@ -16,6 +17,23 @@ export const Flash = {
   },
 } as PhoenixHook<{ timer: ReturnType<typeof setTimeout> }>;
 
+export const Tooltip = {
+  mounted() {
+    if (!this.el.ariaLabel) {
+      console.warn('Tooltip element missing aria-label attribute', this.el);
+      return;
+    }
+
+    let content = this.el.ariaLabel;
+    this._tippyInstance = tippy(this.el, {
+      content: content,
+    });
+  },
+  destroyed() {
+    if (this._tippyInstance) this._tippyInstance.unmount();
+  },
+} as PhoenixHook<{ _tippyInstance: TippyInstance | null }>;
+
 export const AssocListChange = {
   mounted() {
     this.el.addEventListener('change', _event => {

assets/package.json

@@ -31,6 +31,7 @@
     "react-dom": "^18.1.0",
     "react-markdown": "^8.0.3",
     "reactflow": "^11.7.0",
+    "tippy.js": "^6.3.7",
     "zustand": "^4.3.7"
   },
   "devDependencies": {

lib/lightning_web/live/components/common.ex

@@ -80,25 +80,13 @@ defmodule LightningWeb.Components.Common do
 
   def tooltip(assigns) do
     classes = ~w"
-      relative ml-1 cursor-pointer tooltip
-      hover:after:content-[attr(aria-label)]
-      hover:after:absolute
-      hover:after:top-3
-      hover:after:left-3
-      hover:after:min-w-[12rem]
-      hover:after:max-w-fit
-      hover:after:rounded-md
-      hover:after:px-3
-      hover:after:p-2
-      hover:after:z-10
-      hover:after:bg-slate-900
-      hover:after:text-slate-100
+      relative ml-1 cursor-pointer
     "
 
     assigns = assign(assigns, class: classes ++ List.wrap(assigns.class))
 
     ~H"""
-    <span class={@class} id={@id} aria-label={@title}>
+    <span class={@class} id={@id} aria-label={@title} phx-hook="Tooltip">
       <Heroicons.information_circle
         solid
         class="w-4 h-4 text-primary-600 opacity-50"