From 7f4c1755efaf6291a5a13a0ad7fbb126d85f284e Mon Sep 17 00:00:00 2001
From: Guillem Arias Fauste <gariasf@proton.me>
Date: Wed, 16 Oct 2024 19:14:43 +0200
Subject: [PATCH] add dashboard account pill tooltips (#1315)

* add dashboard account pill tooltips

* Update app/views/shared/_text_tooltip.erb

Co-authored-by: Zach Gollwitzer <zach.gollwitzer@gmail.com>
Signed-off-by: Guillem Arias Fauste <gariasf@proton.me>

---------

Signed-off-by: Guillem Arias Fauste <gariasf@proton.me>
Co-authored-by: Zach Gollwitzer <zach.gollwitzer@gmail.com>
---
 app/views/pages/dashboard.html.erb | 9 ++++++---
 app/views/shared/_text_tooltip.erb | 5 +++++
 2 files changed, 11 insertions(+), 3 deletions(-)
 create mode 100644 app/views/shared/_text_tooltip.erb

diff --git a/app/views/pages/dashboard.html.erb b/app/views/pages/dashboard.html.erb
index 64fecd9f..9a70d493 100644
--- a/app/views/pages/dashboard.html.erb
+++ b/app/views/pages/dashboard.html.erb
@@ -72,9 +72,10 @@
           </div>
           <div class="flex gap-1.5">
             <% @top_earners.first(3).each do |account| %>
-              <%= link_to account, class: "border border-alpha-black-25 rounded-full p-1 pr-2 flex items-center gap-1 text-xs text-gray-900 font-medium hover:bg-gray-25" do %>
+              <%= link_to account, class: "border border-alpha-black-25 rounded-full p-1 pr-2 flex items-center gap-1 text-xs text-gray-900 font-medium hover:bg-gray-25", data: { controller: "tooltip" } do %>
                 <%= image_tag account_logo_url(account), class: "w-5 h-5" %>
                 <span>+<%= Money.new(account.income, account.currency) %></span>
+                <%= render partial: "shared/text_tooltip", locals: { tooltip_text: account.name } %>
               <% end %>
             <% end %>
             <% if @top_earners.count > 3 %>
@@ -104,9 +105,10 @@
           </div>
           <div class="flex gap-1.5">
             <% @top_spenders.first(3).each do |account| %>
-              <%= link_to account, class: "border border-alpha-black-25 rounded-full p-1 pr-2 flex items-center gap-1 text-xs text-gray-900 font-medium hover:bg-gray-25" do %>
+              <%= link_to account, class: "border border-alpha-black-25 rounded-full p-1 pr-2 flex items-center gap-1 text-xs text-gray-900 font-medium hover:bg-gray-25", data: { controller: "tooltip" } do %>
                 <%= image_tag account_logo_url(account), class: "w-5 h-5" %>
                 -<%= Money.new(account.spending, account.currency) %>
+                 <%= render partial: "shared/text_tooltip", locals: { tooltip_text: account.name } %>
               <% end %>
             <% end %>
             <% if @top_spenders.count > 3 %>
@@ -138,9 +140,10 @@
           <div class="flex gap-1.5">
             <% @top_savers.first(3).each do |account| %>
               <% unless account.savings_rate.infinite? %>
-                <%= link_to account, class: "border border-alpha-black-25 rounded-full p-1 pr-2 flex items-center gap-1 text-xs text-gray-900 font-medium hover:bg-gray-25" do %>
+                <%= link_to account, class: "border border-alpha-black-25 rounded-full p-1 pr-2 flex items-center gap-1 text-xs text-gray-900 font-medium hover:bg-gray-25", data: { controller: "tooltip" } do %>
                   <%= image_tag account_logo_url(account), class: "w-5 h-5" %>
                   <span><%= account.savings_rate > 0 ? "+" : "-" %><%= number_to_percentage(account.savings_rate.abs * 100, precision: 2) %></span>
+                   <%= render partial: "shared/text_tooltip", locals: { tooltip_text: account.name } %>
                 <% end %>
               <% end %>
             <% end %>
diff --git a/app/views/shared/_text_tooltip.erb b/app/views/shared/_text_tooltip.erb
new file mode 100644
index 00000000..03de7e48
--- /dev/null
+++ b/app/views/shared/_text_tooltip.erb
@@ -0,0 +1,5 @@
+<div role="tooltip" data-tooltip-target="tooltip" class="tooltip bg-gray-700 text-sm px-1.5 py-1 rounded-md">
+  <div class="text-white font-normal">
+    <%= tooltip_text %>
+  </div>
+</div>
\ No newline at end of file