Add tooltip controller

app/assets/stylesheets/tooltips.css

@@ -2,6 +2,7 @@
   .tooltip {
     --tooltip-delay: 750ms;
     --tooltip-duration: 150ms;
+    --tooltip-offset: -85%;
 
     .for-screen-reader {
       background: var(--color-ink);
@@ -15,8 +16,18 @@
       padding: 0.25ch 1ch;
       transition: var(--tooltip-duration) ease-out allow-discrete;
       transition-property: opacity, translate;
-      translate: -50% -85%;
+      translate: -50% var(--tooltip-offset);
       text-overflow: ellipsis;
+
+      &.orient-right {
+        inset-inline-start: 0;
+        translate: 0 var(--tooltip-offset);
+      }
+
+      &.orient-left {
+        inset-inline-end: 0;
+        translate: 0 var(--tooltip-offset);
+      }
     }
 
     @media(any-hover: hover) {
@@ -27,6 +38,11 @@
         opacity: 1;
         transition-delay: var(--tooltip-delay);
         translate: -50% -100%;
+
+        &.orient-left,
+        &.orient-right {
+          translate: 0 -100%;
+        }
       }
     }
   }

app/javascript/controllers/tooltip_controller.js

@@ -0,0 +1,32 @@
+import { Controller } from "@hotwired/stimulus"
+import { orient } from "helpers/orientation_helpers"
+
+export default class extends Controller {
+  static targets = [ "tooltip" ]
+
+  connect() {
+    this.element.addEventListener("mouseenter", this.mouseEnter.bind(this))
+    this.element.addEventListener("mouseout", this.mouseOut.bind(this))
+  }
+
+  disconnect() {
+    this.element.removeEventListener("mouseenter", this.mouseEnter.bind(this))
+    this.element.removeEventListener("mouseout", this.mouseOut.bind(this))
+  }
+
+  mouseEnter(event) {
+    orient(this.#tooltipElement)
+  }
+
+  mouseOut(event) {
+    orient(this.#tooltipElement, false)
+  }
+
+  get #tooltipElement() {
+    return this.element.querySelector(".for-screen-reader")
+  }
+
+  get #tooltipText() {
+    return this.#tooltipElement.innerText
+  }
+}