From 68c8c61d56b1ada0b0c37d0de5c132e340cfea3e Mon Sep 17 00:00:00 2001
From: Jason Zimdars <jz@37signals.com>
Date: Tue, 11 Nov 2025 15:33:38 -0600
Subject: [PATCH] Add tooltips for icon buttons

---
 app/helpers/clipboard_helper.rb              | 2 +-
 app/views/boards/show/menu/_columns.html.erb | 3 ++-
 app/views/filters/settings/_toggle.html.erb  | 6 ++++--
 app/views/users/_transfer.html.erb           | 8 ++++----
 app/views/users/show.html.erb                | 8 ++++----
 5 files changed, 15 insertions(+), 12 deletions(-)

diff --git a/app/helpers/clipboard_helper.rb b/app/helpers/clipboard_helper.rb
index b079dc6a9..972856b15 100644
--- a/app/helpers/clipboard_helper.rb
+++ b/app/helpers/clipboard_helper.rb
@@ -1,7 +1,7 @@
 module ClipboardHelper
   def button_to_copy_to_clipboard(url, &)
     tag.button class: "btn", data: {
-      controller: "copy-to-clipboard", action: "copy-to-clipboard#copy",
+      controller: "copy-to-clipboard tooltip", action: "copy-to-clipboard#copy",
       copy_to_clipboard_success_class: "btn--success", copy_to_clipboard_content_value: url
     }, &
   end
diff --git a/app/views/boards/show/menu/_columns.html.erb b/app/views/boards/show/menu/_columns.html.erb
index b3ea1cd56..70aac7c90 100644
--- a/app/views/boards/show/menu/_columns.html.erb
+++ b/app/views/boards/show/menu/_columns.html.erb
@@ -1,6 +1,7 @@
 <div class="cards__new-column position-relative" data-controller="dialog" data-action="keydown.esc->dialog#close click@document->dialog#closeOnClickOutside" data-turbo-permanent>
-  <button class="btn btn--circle txt-x-small borderless" data-action="click->dialog#open:stop" aria-label="Add a new column, etc.">
+  <button class="btn btn--circle txt-x-small borderless" data-controller="tooltip" data-action="click->dialog#open:stop">
     <%= icon_tag "add", class: "translucent" %>
+    <span class="for-screen-reader">Add a column</span>
   </button>
   <dialog class="popup panel flex-column gap-half fill-white shadow txt-small margin-block-double" data-dialog-target="dialog">
     <%= render "boards/show/menu/column_form", board: board, column: Column.new, label: "Add column" %>
diff --git a/app/views/filters/settings/_toggle.html.erb b/app/views/filters/settings/_toggle.html.erb
index 1f6459e0a..d1e7d10bf 100644
--- a/app/views/filters/settings/_toggle.html.erb
+++ b/app/views/filters/settings/_toggle.html.erb
@@ -1,11 +1,13 @@
 <% filter = user_filtering.filter %>
 
 <% if user_filtering.expanded? %>
-  <button type="button" class="btn txt-x-small btn--reversed" aria-selected="true" aria-label="Close filter options" data-action="toggle-class#toggle toggle-enable#toggle">
+  <button type="button" class="btn txt-x-small btn--reversed" aria-selected="true" data-action="toggle-class#toggle toggle-enable#toggle" data-controller="tooltip">
     <%= icon_tag "filter" %>
+    <span class="for-screen-reader">Close filter options</span>
   </button>
 <% else %>
-  <button type="button" class="btn txt-x-small filter-toggle" aria-label="Expand filter options" data-action="toggle-class#toggle toggle-enable#toggle">
+  <button type="button" class="btn txt-x-small filter-toggle" data-action="toggle-class#toggle toggle-enable#toggle" data-controller="tooltip">
     <%= icon_tag "filter" %>
+    <span class="for-screen-reader">Expand filter options</span>
   </button>
 <% end %>
diff --git a/app/views/users/_transfer.html.erb b/app/views/users/_transfer.html.erb
index b260a152e..8befea9ce 100644
--- a/app/views/users/_transfer.html.erb
+++ b/app/views/users/_transfer.html.erb
@@ -12,18 +12,18 @@
 
   <div class="flex align-center gap">
     <div data-controller="dialog" data-dialog-modal-value="true" class="flex-inline">
-      <%= tag.button class: "btn", data: { action: "dialog#open" } do %>
+      <%= tag.button class: "btn", data: { action: "dialog#open", controller: "tooltip" } do %>
         <%= icon_tag "qr-code" %>
-        <span class="for-screen-reader">Show auto-login QR code</span>
+        <span class="for-screen-reader">Display auto-login QR code</span>
       <% end %>
 
       <dialog class="dialog panel shadow" data-dialog-target="dialog">
         <%= qr_code_image(url) %>
 
         <form method="dialog" class="margin-block-start flex justify-center">
-          <button class="btn">
+          <button class="btn" data-controller="tooltip">
             <%= icon_tag "remove" %>
-            <span class="for-screen-reader">Close</span>
+            <span class="for-screen-reader">Close dialog</span>
           </button>
         </form>
       </dialog>
diff --git a/app/views/users/show.html.erb b/app/views/users/show.html.erb
index d5cbd8865..eec6444a0 100644
--- a/app/views/users/show.html.erb
+++ b/app/views/users/show.html.erb
@@ -5,9 +5,9 @@
   <section class="panel shadow txt-align-center" style="--panel-size: 45ch;">
     <div class="flex flex-column gap position-relative">
       <% if Current.user == @user %>
-        <%= link_to edit_user_path(@user), class: "user-edit-link btn" do %>
+        <%= link_to edit_user_path(@user), class: "user-edit-link btn", data: { controller: "tooltip" } do %>
           <%= icon_tag "pencil" %>
-          <span class="for-screen-reader">Edit</span>
+          <span class="for-screen-reader">Edit profile</span>
         <% end %>
       <% end %>
 
@@ -27,9 +27,9 @@
       </div>
 
       <div class="flex-inline center justify-center flex-wrap gap">
-        <%= link_to "Which cards are assigned to #{me_or_you}?", 
+        <%= link_to "Which cards are assigned to #{me_or_you}?",
               cards_path(assignee_ids: [ @user.id ], sorted_by: "newest"), class: "btn", data: { turbo_frame: "_top" } %>
-        <%= link_to "Which cards were added by #{me_or_you}?", 
+        <%= link_to "Which cards were added by #{me_or_you}?",
               cards_path(creator_ids: [ @user.id ], sorted_by: "newest"), class: "btn", data: { turbo_frame: "_top" } %>
       </div>
     </div>