From 427ac5c84b0336e6231a05078cf4a794f0098cac Mon Sep 17 00:00:00 2001
From: Andy Smith <andy@37signals.com>
Date: Mon, 22 Sep 2025 15:52:30 -0500
Subject: [PATCH 1/6] Add tooltip controller

---
 app/assets/stylesheets/tooltips.css           | 18 ++++++++++-
 .../controllers/tooltip_controller.js         | 32 +++++++++++++++++++
 2 files changed, 49 insertions(+), 1 deletion(-)
 create mode 100644 app/javascript/controllers/tooltip_controller.js

diff --git a/app/assets/stylesheets/tooltips.css b/app/assets/stylesheets/tooltips.css
index c206e8954..9986bdfed 100644
--- a/app/assets/stylesheets/tooltips.css
+++ b/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%;
+        }
       }
     }
   }
diff --git a/app/javascript/controllers/tooltip_controller.js b/app/javascript/controllers/tooltip_controller.js
new file mode 100644
index 000000000..0b242f157
--- /dev/null
+++ b/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
+  }
+}

From a1758112e937899b1b7552ce9a8f6001685c46cd Mon Sep 17 00:00:00 2001
From: Andy Smith <andy@37signals.com>
Date: Mon, 22 Sep 2025 16:02:49 -0500
Subject: [PATCH 2/6] Add z-index

---
 app/assets/stylesheets/_global.css  | 1 +
 app/assets/stylesheets/tooltips.css | 1 +
 2 files changed, 2 insertions(+)

diff --git a/app/assets/stylesheets/_global.css b/app/assets/stylesheets/_global.css
index c991bba2b..2f9511f90 100644
--- a/app/assets/stylesheets/_global.css
+++ b/app/assets/stylesheets/_global.css
@@ -74,6 +74,7 @@
   --z-popup: 10;
   --z-terminal: 20;
   --z-tray: 21;
+  --z-tooltip: 30;
 
   /* OKLCH colors: Fixed */
   --lch-black: 0% 0 0;
diff --git a/app/assets/stylesheets/tooltips.css b/app/assets/stylesheets/tooltips.css
index 9986bdfed..353599ab4 100644
--- a/app/assets/stylesheets/tooltips.css
+++ b/app/assets/stylesheets/tooltips.css
@@ -38,6 +38,7 @@
         opacity: 1;
         transition-delay: var(--tooltip-delay);
         translate: -50% -100%;
+        z-index: var(--z-tooltip);
 
         &.orient-left,
         &.orient-right {

From 402e8312cdaa99005865e28506b06362acfec867 Mon Sep 17 00:00:00 2001
From: Andy Smith <andy@37signals.com>
Date: Mon, 22 Sep 2025 16:33:16 -0500
Subject: [PATCH 3/6] Only transition opacity

---
 app/assets/stylesheets/tooltips.css | 9 ++++-----
 1 file changed, 4 insertions(+), 5 deletions(-)

diff --git a/app/assets/stylesheets/tooltips.css b/app/assets/stylesheets/tooltips.css
index 353599ab4..9df7b7067 100644
--- a/app/assets/stylesheets/tooltips.css
+++ b/app/assets/stylesheets/tooltips.css
@@ -2,7 +2,6 @@
   .tooltip {
     --tooltip-delay: 750ms;
     --tooltip-duration: 150ms;
-    --tooltip-offset: -85%;
 
     .for-screen-reader {
       background: var(--color-ink);
@@ -15,18 +14,18 @@
       opacity: 0;
       padding: 0.25ch 1ch;
       transition: var(--tooltip-duration) ease-out allow-discrete;
-      transition-property: opacity, translate;
-      translate: -50% var(--tooltip-offset);
+      transition-property: opacity;
+      translate: -50% -100%;
       text-overflow: ellipsis;
 
       &.orient-right {
         inset-inline-start: 0;
-        translate: 0 var(--tooltip-offset);
+        translate: 0 -100%;
       }
 
       &.orient-left {
         inset-inline-end: 0;
-        translate: 0 var(--tooltip-offset);
+        translate: 0 -100%;
       }
     }
 

From 3c3ae8563e6b637ead98fba6f7f4ba2828114b36 Mon Sep 17 00:00:00 2001
From: Andy Smith <andy@37signals.com>
Date: Mon, 22 Sep 2025 16:45:24 -0500
Subject: [PATCH 4/6] Larger max-width

---
 app/assets/stylesheets/tooltips.css | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/app/assets/stylesheets/tooltips.css b/app/assets/stylesheets/tooltips.css
index 9df7b7067..80abc5cc3 100644
--- a/app/assets/stylesheets/tooltips.css
+++ b/app/assets/stylesheets/tooltips.css
@@ -10,7 +10,7 @@
       font-size: var(--text-x-small);
       font-weight: normal;
       inset: -1ch auto auto 50%;
-      max-inline-size: 28ch;
+      max-inline-size: 50ch;
       opacity: 0;
       padding: 0.25ch 1ch;
       transition: var(--tooltip-duration) ease-out allow-discrete;

From 3d5bdc64f4637c68a03889f228a44c2ee3d53f7e Mon Sep 17 00:00:00 2001
From: Andy Smith <andy@37signals.com>
Date: Mon, 22 Sep 2025 16:50:07 -0500
Subject: [PATCH 5/6] Add JS controller to existing tooltips

---
 app/views/cards/_collection_settings.html.erb      | 2 +-
 app/views/cards/_webhooks.html.erb                 | 2 +-
 app/views/cards/container/_gild.html.erb           | 4 ++--
 app/views/cards/container/_image.html.erb          | 4 ++--
 app/views/cards/container/footer/_draft.html.erb   | 2 +-
 app/views/cards/display/common/_assignees.html.erb | 2 +-
 app/views/cards/display/perma/_background.html.erb | 2 +-
 app/views/cards/display/perma/_tags.html.erb       | 2 +-
 app/views/cards/pins/_pin_button.html.erb          | 4 ++--
 app/views/cards/show.html.erb                      | 2 +-
 app/views/cards/watches/show.html.erb              | 4 ++--
 app/views/layouts/_lightbox.html.erb               | 2 +-
 app/views/workflows/stages/_color.html.erb         | 2 +-
 13 files changed, 17 insertions(+), 17 deletions(-)

diff --git a/app/views/cards/_collection_settings.html.erb b/app/views/cards/_collection_settings.html.erb
index 318eeb70c..a03b2e4bb 100644
--- a/app/views/cards/_collection_settings.html.erb
+++ b/app/views/cards/_collection_settings.html.erb
@@ -1,4 +1,4 @@
-<%= link_to edit_collection_path(collection), class: "btn tooltip" do %>
+<%= link_to edit_collection_path(collection), class: "btn tooltip", data: { controller: "tooltip" } do %>
   <%= icon_tag "settings" %>
   <span class="for-screen-reader">Settings for <%= collection.name %></span>
 <% end %>
diff --git a/app/views/cards/_webhooks.html.erb b/app/views/cards/_webhooks.html.erb
index 2bdddaa3d..079308b29 100644
--- a/app/views/cards/_webhooks.html.erb
+++ b/app/views/cards/_webhooks.html.erb
@@ -1,4 +1,4 @@
-<%= link_to collection_webhooks_path(collection_id: collection), class: ["btn tooltip", {"btn--reversed": collection.webhooks.any?}] do %>
+<%= link_to collection_webhooks_path(collection_id: collection), class: ["btn tooltip", {"btn--reversed": collection.webhooks.any?}], data: { controller: "tooltip" } do %>
   <%= icon_tag "world" %>
   <span class="for-screen-reader">Webhooks</span>
 <% end %>
diff --git a/app/views/cards/container/_gild.html.erb b/app/views/cards/container/_gild.html.erb
index dc4298348..a489f08cd 100644
--- a/app/views/cards/container/_gild.html.erb
+++ b/app/views/cards/container/_gild.html.erb
@@ -1,10 +1,10 @@
 <% if card.golden? %>
-  <%= button_to card_goldness_path(card), method: :delete, class: "btn btn--reversed tooltip" do %>
+  <%= button_to card_goldness_path(card), method: :delete, class: "btn btn--reversed tooltip", data: { controller: "tooltip" } do %>
     <%= icon_tag "golden-ticket" %>
     <span class="for-screen-reader">Demote to normal</span>
   <% end %>
 <% else %>
-  <%= button_to card_goldness_path(card), class: "btn tooltip" do %>
+  <%= button_to card_goldness_path(card), class: "btn tooltip", data: { controller: "tooltip" } do %>
     <%= icon_tag "golden-ticket" %>
     <span class="for-screen-reader">Promote to golden</span>
   <% end %>
diff --git a/app/views/cards/container/_image.html.erb b/app/views/cards/container/_image.html.erb
index de2341aa1..ed11fd5c8 100644
--- a/app/views/cards/container/_image.html.erb
+++ b/app/views/cards/container/_image.html.erb
@@ -1,11 +1,11 @@
 <% if card.image.attached? %>
-  <%= button_to card_image_path(card), method: :delete, class: "btn tooltip" do %>
+  <%= button_to card_image_path(card), method: :delete, class: "btn tooltip", data: { controller: "tooltip" } do %>
     <%= icon_tag "picture-remove" %>
     <span class="for-screen-reader">Remove background image</span>
   <% end %>
 <% elsif !card.closed? %>
   <%= form_with model: card, url: card_path(card), data: { controller: "form" } do |form| %>
-    <label class="btn input--file tooltip">
+    <label class="btn input--file tooltip" data-controller="tooltip">
       <%= icon_tag "picture-add" %>
       <span class="for-screen-reader">Add background image</span>
       <%= form.file_field :image, class: "input",
diff --git a/app/views/cards/container/footer/_draft.html.erb b/app/views/cards/container/footer/_draft.html.erb
index bb35e16b5..8518c8e69 100644
--- a/app/views/cards/container/footer/_draft.html.erb
+++ b/app/views/cards/container/footer/_draft.html.erb
@@ -1,6 +1,6 @@
 <div class="card-perma__notch card-perma__notch--bottom">
   <%= button_to "Create card", card_publish_path(card), name: "creation_type", value: "add", class: "btn" %>
-  <%= button_to "Create and add another", card_publish_path(card), method: :post, class: "btn btn--reversed tooltip", name: "creation_type", value: "add_another", 
+  <%= button_to "Create and add another", card_publish_path(card), method: :post, class: "btn btn--reversed", name: "creation_type", value: "add_another",
         title: "Create and add another (ctrl+shift+enter)", form: { data: { turbo: false } }, data: { controller: "hotkey", action: "keydown.ctrl+shift+enter@document->hotkey#click" } %>
   <%= button_to "Save as a draft", card_path(card), name: "card[status]", value: "drafted", method: :put, class: "btn btn--reversed" %>
 </div>
diff --git a/app/views/cards/display/common/_assignees.html.erb b/app/views/cards/display/common/_assignees.html.erb
index 895b29bd9..ce44f0448 100644
--- a/app/views/cards/display/common/_assignees.html.erb
+++ b/app/views/cards/display/common/_assignees.html.erb
@@ -4,7 +4,7 @@
   <% end %>
 
   <div class="position-relative" data-controller="dialog" data-action="keydown.esc->dialog#close click@document->dialog#closeOnClickOutside" <%= "hidden" if card.closed? %>>
-    <button class="btn card__hide-on-index tooltip" data-action="click->dialog#open:stop" style="--btn-background: var(--card-bg-color);">
+    <button class="btn card__hide-on-index tooltip" data-action="click->dialog#open:stop" style="--btn-background: var(--card-bg-color);" data-controller="tooltip">
       <%= icon_tag "person-add" %>
       <span class="for-screen-reader">Assign</span>
     </button>
diff --git a/app/views/cards/display/perma/_background.html.erb b/app/views/cards/display/perma/_background.html.erb
index 4db03ddcc..3e0cfaf06 100644
--- a/app/views/cards/display/perma/_background.html.erb
+++ b/app/views/cards/display/perma/_background.html.erb
@@ -1,5 +1,5 @@
 <%= render "cards/display/common/background", card: card do %>
-  <%= link_to card.image.presence, class: "btn fill-transparent flex-item-justify-end tooltip", data: { action: "lightbox#open:prevent", lightbox_target: "image" } do %>
+  <%= link_to card.image.presence, class: "btn fill-transparent flex-item-justify-end tooltip", data: { controller: "tooltip", action: "lightbox#open:prevent", lightbox_target: "image" } do %>
     <%= icon_tag "picture-zoom" %>
     <span class="for-screen-reader">Zoom background image</span>
   <% end %>
diff --git a/app/views/cards/display/perma/_tags.html.erb b/app/views/cards/display/perma/_tags.html.erb
index 76d69a8d0..0f10b176e 100644
--- a/app/views/cards/display/perma/_tags.html.erb
+++ b/app/views/cards/display/perma/_tags.html.erb
@@ -12,7 +12,7 @@
   </div>
 
   <div class="position-relative" data-controller="dialog" data-action="keydown.esc->dialog#close click@document->dialog#closeOnClickOutside" <%= "hidden" if card.closed? %>>
-    <button class="tag-picker__button btn card__hide-on-index tooltip" data-action="click->dialog#open:stop" style="--btn-background: var(--card-bg-color);">
+    <button class="tag-picker__button btn card__hide-on-index tooltip" data-action="click->dialog#open:stop" style="--btn-background: var(--card-bg-color);" data-controller="tooltip">
       <%= icon_tag "tag" %>
       <span class="for-screen-reader">Add a tag</span>
     </button>
diff --git a/app/views/cards/pins/_pin_button.html.erb b/app/views/cards/pins/_pin_button.html.erb
index c09e0e5f5..50f3aa704 100644
--- a/app/views/cards/pins/_pin_button.html.erb
+++ b/app/views/cards/pins/_pin_button.html.erb
@@ -1,10 +1,10 @@
 <div id="<%= dom_id(card, :pin_button) %>">
   <% if card.pinned_by? Current.user %>
-    <%= button_to card_pin_path(card), method: :delete, class: "btn btn--reversed tooltip" do %>
+    <%= button_to card_pin_path(card), method: :delete, class: "btn btn--reversed tooltip", data: { controller: "tooltip" } do %>
       <%= icon_tag "pinned" %> <span class="for-screen-reader">Un-pin this card</span>
     <% end %>
   <% else %>
-    <%= button_to card_pin_path(card), class: "btn tooltip" do %>
+    <%= button_to card_pin_path(card), class: "btn tooltip", data: { controller: "tooltip" } do %>
       <%= icon_tag "unpinned" %> <span class="for-screen-reader">Pin this card</span>
     <% end %>
   <% end %>
diff --git a/app/views/cards/show.html.erb b/app/views/cards/show.html.erb
index 07247152e..7f2ec678b 100644
--- a/app/views/cards/show.html.erb
+++ b/app/views/cards/show.html.erb
@@ -29,7 +29,7 @@
 
   <%= render "layouts/lightbox" do %>
     <% if @card.image.attached? %>
-      <%= button_to card_image_path(@card), method: :delete, class: "btn tooltip" do %>
+      <%= button_to card_image_path(@card), method: :delete, class: "btn tooltip", data: { controller: "tooltip" } do %>
         <%= icon_tag "trash" %>
         <span class="for-screen-reader">Remove background image</span>
       <% end %>
diff --git a/app/views/cards/watches/show.html.erb b/app/views/cards/watches/show.html.erb
index 1f845294c..4a2f9f1b3 100644
--- a/app/views/cards/watches/show.html.erb
+++ b/app/views/cards/watches/show.html.erb
@@ -1,11 +1,11 @@
 <%= turbo_frame_tag dom_id(@card, :watch) do %>
   <% if @card.watched_by? Current.user %>
-      <%= button_to card_watch_path(@card), method: :delete, class: "btn btn--reversed tooltip" do %>
+      <%= button_to card_watch_path(@card), method: :delete, class: "btn btn--reversed tooltip", data: { controller: "tooltip" } do %>
         <%= icon_tag "bell" %>
         <span class="for-screen-reader">Stop watching</span>
       <% end %>
   <% else %>
-      <%= button_to card_watch_path(@card), class: "btn tooltip" do %>
+      <%= button_to card_watch_path(@card), class: "btn tooltip", data: { controller: "tooltip" } do %>
         <%= icon_tag "bell-off" %>
         <span class="for-screen-reader">Watch this</span>
       <% end %>
diff --git a/app/views/layouts/_lightbox.html.erb b/app/views/layouts/_lightbox.html.erb
index e1b077c84..c42e72c94 100644
--- a/app/views/layouts/_lightbox.html.erb
+++ b/app/views/layouts/_lightbox.html.erb
@@ -8,7 +8,7 @@
 
   <div class="lightbox__actions">
     <%= yield %>
-    <button class="btn fill-white tooltip" data-action="dialog#close keydown.esc->dialog#close:stop" data-controller="hotkey">
+    <button class="btn fill-white tooltip" data-action="dialog#close keydown.esc->dialog#close:stop" data-controller="hotkey tooltip">
       <%= icon_tag "remove" %>
       <span class="for-screen-reader">Close (esc)</span>
     </button>
diff --git a/app/views/workflows/stages/_color.html.erb b/app/views/workflows/stages/_color.html.erb
index 14c789e22..7542e218b 100644
--- a/app/views/workflows/stages/_color.html.erb
+++ b/app/views/workflows/stages/_color.html.erb
@@ -6,7 +6,7 @@
 
   <dialog class="color-picker shadow" data-dialog-target="dialog" data-action="keydown.esc->dialog#close click@document->dialog#closeOnClickOutside">
     <form method="dialog">
-      <button class="btn txt-small tooltip">
+      <button class="btn txt-small tooltip" data-controller="tooltip">
         <%= icon_tag "remove" %>
         <span class="for-screen-reader">Close (esc)</span>
       </button>

From b82c6e9102b150171f3ddad1fd0226e0844c9731 Mon Sep 17 00:00:00 2001
From: Andy Smith <andy@37signals.com>
Date: Mon, 22 Sep 2025 16:58:57 -0500
Subject: [PATCH 6/6] Use data-controller instead of class for tooltip CSS

---
 app/assets/stylesheets/tooltips.css                | 2 +-
 app/views/cards/_collection_settings.html.erb      | 2 +-
 app/views/cards/_webhooks.html.erb                 | 2 +-
 app/views/cards/container/_gild.html.erb           | 4 ++--
 app/views/cards/container/_image.html.erb          | 4 ++--
 app/views/cards/display/common/_assignees.html.erb | 2 +-
 app/views/cards/display/perma/_background.html.erb | 2 +-
 app/views/cards/display/perma/_tags.html.erb       | 2 +-
 app/views/cards/pins/_pin_button.html.erb          | 4 ++--
 app/views/cards/show.html.erb                      | 2 +-
 app/views/cards/watches/show.html.erb              | 4 ++--
 app/views/layouts/_lightbox.html.erb               | 2 +-
 app/views/workflows/stages/_color.html.erb         | 2 +-
 13 files changed, 17 insertions(+), 17 deletions(-)

diff --git a/app/assets/stylesheets/tooltips.css b/app/assets/stylesheets/tooltips.css
index 80abc5cc3..854c7406c 100644
--- a/app/assets/stylesheets/tooltips.css
+++ b/app/assets/stylesheets/tooltips.css
@@ -1,5 +1,5 @@
 @layer components {
-  .tooltip {
+  [data-controller^="tooltip"] {
     --tooltip-delay: 750ms;
     --tooltip-duration: 150ms;
 
diff --git a/app/views/cards/_collection_settings.html.erb b/app/views/cards/_collection_settings.html.erb
index a03b2e4bb..b677c3f96 100644
--- a/app/views/cards/_collection_settings.html.erb
+++ b/app/views/cards/_collection_settings.html.erb
@@ -1,4 +1,4 @@
-<%= link_to edit_collection_path(collection), class: "btn tooltip", data: { controller: "tooltip" } do %>
+<%= link_to edit_collection_path(collection), class: "btn", data: { controller: "tooltip" } do %>
   <%= icon_tag "settings" %>
   <span class="for-screen-reader">Settings for <%= collection.name %></span>
 <% end %>
diff --git a/app/views/cards/_webhooks.html.erb b/app/views/cards/_webhooks.html.erb
index 079308b29..4ed058479 100644
--- a/app/views/cards/_webhooks.html.erb
+++ b/app/views/cards/_webhooks.html.erb
@@ -1,4 +1,4 @@
-<%= link_to collection_webhooks_path(collection_id: collection), class: ["btn tooltip", {"btn--reversed": collection.webhooks.any?}], data: { controller: "tooltip" } do %>
+<%= link_to collection_webhooks_path(collection_id: collection), class: ["btn", {"btn--reversed": collection.webhooks.any?}], data: { controller: "tooltip" } do %>
   <%= icon_tag "world" %>
   <span class="for-screen-reader">Webhooks</span>
 <% end %>
diff --git a/app/views/cards/container/_gild.html.erb b/app/views/cards/container/_gild.html.erb
index a489f08cd..c8e337267 100644
--- a/app/views/cards/container/_gild.html.erb
+++ b/app/views/cards/container/_gild.html.erb
@@ -1,10 +1,10 @@
 <% if card.golden? %>
-  <%= button_to card_goldness_path(card), method: :delete, class: "btn btn--reversed tooltip", data: { controller: "tooltip" } do %>
+  <%= button_to card_goldness_path(card), method: :delete, class: "btn btn--reversed", data: { controller: "tooltip" } do %>
     <%= icon_tag "golden-ticket" %>
     <span class="for-screen-reader">Demote to normal</span>
   <% end %>
 <% else %>
-  <%= button_to card_goldness_path(card), class: "btn tooltip", data: { controller: "tooltip" } do %>
+  <%= button_to card_goldness_path(card), class: "btn", data: { controller: "tooltip" } do %>
     <%= icon_tag "golden-ticket" %>
     <span class="for-screen-reader">Promote to golden</span>
   <% end %>
diff --git a/app/views/cards/container/_image.html.erb b/app/views/cards/container/_image.html.erb
index ed11fd5c8..c5827ea3d 100644
--- a/app/views/cards/container/_image.html.erb
+++ b/app/views/cards/container/_image.html.erb
@@ -1,11 +1,11 @@
 <% if card.image.attached? %>
-  <%= button_to card_image_path(card), method: :delete, class: "btn tooltip", data: { controller: "tooltip" } do %>
+  <%= button_to card_image_path(card), method: :delete, class: "btn", data: { controller: "tooltip" } do %>
     <%= icon_tag "picture-remove" %>
     <span class="for-screen-reader">Remove background image</span>
   <% end %>
 <% elsif !card.closed? %>
   <%= form_with model: card, url: card_path(card), data: { controller: "form" } do |form| %>
-    <label class="btn input--file tooltip" data-controller="tooltip">
+    <label class="btn input--file" data-controller="tooltip">
       <%= icon_tag "picture-add" %>
       <span class="for-screen-reader">Add background image</span>
       <%= form.file_field :image, class: "input",
diff --git a/app/views/cards/display/common/_assignees.html.erb b/app/views/cards/display/common/_assignees.html.erb
index ce44f0448..19aebd6a9 100644
--- a/app/views/cards/display/common/_assignees.html.erb
+++ b/app/views/cards/display/common/_assignees.html.erb
@@ -4,7 +4,7 @@
   <% end %>
 
   <div class="position-relative" data-controller="dialog" data-action="keydown.esc->dialog#close click@document->dialog#closeOnClickOutside" <%= "hidden" if card.closed? %>>
-    <button class="btn card__hide-on-index tooltip" data-action="click->dialog#open:stop" style="--btn-background: var(--card-bg-color);" data-controller="tooltip">
+    <button class="btn card__hide-on-index" data-action="click->dialog#open:stop" style="--btn-background: var(--card-bg-color);" data-controller="tooltip">
       <%= icon_tag "person-add" %>
       <span class="for-screen-reader">Assign</span>
     </button>
diff --git a/app/views/cards/display/perma/_background.html.erb b/app/views/cards/display/perma/_background.html.erb
index 3e0cfaf06..6ade6f1b5 100644
--- a/app/views/cards/display/perma/_background.html.erb
+++ b/app/views/cards/display/perma/_background.html.erb
@@ -1,5 +1,5 @@
 <%= render "cards/display/common/background", card: card do %>
-  <%= link_to card.image.presence, class: "btn fill-transparent flex-item-justify-end tooltip", data: { controller: "tooltip", action: "lightbox#open:prevent", lightbox_target: "image" } do %>
+  <%= link_to card.image.presence, class: "btn fill-transparent flex-item-justify-end", data: { controller: "tooltip", action: "lightbox#open:prevent", lightbox_target: "image" } do %>
     <%= icon_tag "picture-zoom" %>
     <span class="for-screen-reader">Zoom background image</span>
   <% end %>
diff --git a/app/views/cards/display/perma/_tags.html.erb b/app/views/cards/display/perma/_tags.html.erb
index 0f10b176e..fb1896ad0 100644
--- a/app/views/cards/display/perma/_tags.html.erb
+++ b/app/views/cards/display/perma/_tags.html.erb
@@ -12,7 +12,7 @@
   </div>
 
   <div class="position-relative" data-controller="dialog" data-action="keydown.esc->dialog#close click@document->dialog#closeOnClickOutside" <%= "hidden" if card.closed? %>>
-    <button class="tag-picker__button btn card__hide-on-index tooltip" data-action="click->dialog#open:stop" style="--btn-background: var(--card-bg-color);" data-controller="tooltip">
+    <button class="tag-picker__button btn card__hide-on-index" data-action="click->dialog#open:stop" style="--btn-background: var(--card-bg-color);" data-controller="tooltip">
       <%= icon_tag "tag" %>
       <span class="for-screen-reader">Add a tag</span>
     </button>
diff --git a/app/views/cards/pins/_pin_button.html.erb b/app/views/cards/pins/_pin_button.html.erb
index 50f3aa704..f49fbe5f3 100644
--- a/app/views/cards/pins/_pin_button.html.erb
+++ b/app/views/cards/pins/_pin_button.html.erb
@@ -1,10 +1,10 @@
 <div id="<%= dom_id(card, :pin_button) %>">
   <% if card.pinned_by? Current.user %>
-    <%= button_to card_pin_path(card), method: :delete, class: "btn btn--reversed tooltip", data: { controller: "tooltip" } do %>
+    <%= button_to card_pin_path(card), method: :delete, class: "btn btn--reversed", data: { controller: "tooltip" } do %>
       <%= icon_tag "pinned" %> <span class="for-screen-reader">Un-pin this card</span>
     <% end %>
   <% else %>
-    <%= button_to card_pin_path(card), class: "btn tooltip", data: { controller: "tooltip" } do %>
+    <%= button_to card_pin_path(card), class: "btn", data: { controller: "tooltip" } do %>
       <%= icon_tag "unpinned" %> <span class="for-screen-reader">Pin this card</span>
     <% end %>
   <% end %>
diff --git a/app/views/cards/show.html.erb b/app/views/cards/show.html.erb
index 7f2ec678b..9bcd72a19 100644
--- a/app/views/cards/show.html.erb
+++ b/app/views/cards/show.html.erb
@@ -29,7 +29,7 @@
 
   <%= render "layouts/lightbox" do %>
     <% if @card.image.attached? %>
-      <%= button_to card_image_path(@card), method: :delete, class: "btn tooltip", data: { controller: "tooltip" } do %>
+      <%= button_to card_image_path(@card), method: :delete, class: "btn", data: { controller: "tooltip" } do %>
         <%= icon_tag "trash" %>
         <span class="for-screen-reader">Remove background image</span>
       <% end %>
diff --git a/app/views/cards/watches/show.html.erb b/app/views/cards/watches/show.html.erb
index 4a2f9f1b3..b62dee483 100644
--- a/app/views/cards/watches/show.html.erb
+++ b/app/views/cards/watches/show.html.erb
@@ -1,11 +1,11 @@
 <%= turbo_frame_tag dom_id(@card, :watch) do %>
   <% if @card.watched_by? Current.user %>
-      <%= button_to card_watch_path(@card), method: :delete, class: "btn btn--reversed tooltip", data: { controller: "tooltip" } do %>
+      <%= button_to card_watch_path(@card), method: :delete, class: "btn btn--reversed", data: { controller: "tooltip" } do %>
         <%= icon_tag "bell" %>
         <span class="for-screen-reader">Stop watching</span>
       <% end %>
   <% else %>
-      <%= button_to card_watch_path(@card), class: "btn tooltip", data: { controller: "tooltip" } do %>
+      <%= button_to card_watch_path(@card), class: "btn", data: { controller: "tooltip" } do %>
         <%= icon_tag "bell-off" %>
         <span class="for-screen-reader">Watch this</span>
       <% end %>
diff --git a/app/views/layouts/_lightbox.html.erb b/app/views/layouts/_lightbox.html.erb
index c42e72c94..2dbf5c8d8 100644
--- a/app/views/layouts/_lightbox.html.erb
+++ b/app/views/layouts/_lightbox.html.erb
@@ -8,7 +8,7 @@
 
   <div class="lightbox__actions">
     <%= yield %>
-    <button class="btn fill-white tooltip" data-action="dialog#close keydown.esc->dialog#close:stop" data-controller="hotkey tooltip">
+    <button class="btn fill-white" data-action="dialog#close keydown.esc->dialog#close:stop" data-controller="hotkey tooltip">
       <%= icon_tag "remove" %>
       <span class="for-screen-reader">Close (esc)</span>
     </button>
diff --git a/app/views/workflows/stages/_color.html.erb b/app/views/workflows/stages/_color.html.erb
index 7542e218b..e985d520f 100644
--- a/app/views/workflows/stages/_color.html.erb
+++ b/app/views/workflows/stages/_color.html.erb
@@ -6,7 +6,7 @@
 
   <dialog class="color-picker shadow" data-dialog-target="dialog" data-action="keydown.esc->dialog#close click@document->dialog#closeOnClickOutside">
     <form method="dialog">
-      <button class="btn txt-small tooltip" data-controller="tooltip">
+      <button class="btn txt-small" data-controller="tooltip">
         <%= icon_tag "remove" %>
         <span class="for-screen-reader">Close (esc)</span>
       </button>