Show tooltip with raw count

lib/music_library_web/components/stats_components.ex

@@ -49,6 +49,7 @@ defmodule MusicLibraryWeb.StatsComponents do
   attr :title, :string, required: true
   attr :count, :integer, required: true
   attr :path, :string, required: false, default: nil
+  attr :tooltip, :any, required: false, default: nil
 
   def counter(assigns) do
     ~H"""
@@ -58,7 +59,7 @@ defmodule MusicLibraryWeb.StatsComponents do
           {@title}
         </p>
       </dt>
-      <dd class="mt-1">
+      <dd :if={!@tooltip} class="mt-1">
         <.link
           :if={@path}
           navigate={@path}
@@ -68,11 +69,28 @@ defmodule MusicLibraryWeb.StatsComponents do
         </.link>
         <p
           :if={!@path}
-          class="block text-2xl sm:text-3xl font-semibold text-center text-zinc-900 dark:text-zinc-300"
+          class="block cursor-default text-2xl sm:text-3xl font-semibold text-center text-zinc-900 dark:text-zinc-300"
         >
           {@count}
         </p>
       </dd>
+      <dd :if={@tooltip} class="mt-1">
+        <.tooltip value={@tooltip}>
+          <.link
+            :if={@path}
+            navigate={@path}
+            class="block text-2xl sm:text-3xl font-semibold text-center text-zinc-900 hover:text-zinc-500 dark:text-zinc-300 dark:hover:text-zinc-200"
+          >
+            {@count}
+          </.link>
+          <p
+            :if={!@path}
+            class="block cursor-default text-2xl sm:text-3xl font-semibold text-center text-zinc-900 dark:text-zinc-300"
+          >
+            {@count}
+          </p>
+        </.tooltip>
+      </dd>
     </div>
     """
   end

lib/music_library_web/live/stats_live/index.html.heex

@@ -15,7 +15,11 @@
       path={~p"/collection"}
     />
     <.counter title={gettext("Total wishlist")} count={@wishlist_count} path={~p"/wishlist"} />
-    <.counter title={gettext("Total scrobbles")} count={to_compact(@scrobble_count)} />
+    <.counter
+      title={gettext("Total scrobbles")}
+      count={to_compact(@scrobble_count)}
+      tooltip={@scrobble_count}
+    />
   </dl>
 </div>