From 00254144b33c57cc6422bffa1ebb7577e587d54e Mon Sep 17 00:00:00 2001
From: juanatsap <juanatsap@gmail.com>
Date: Thu, 20 Nov 2025 18:40:15 +0000
Subject: [PATCH] feat: Add tooltips to info and theme switcher buttons

- Add has-tooltip class and data-tooltip to info button
- Add has-tooltip class and data-tooltip to color theme switcher
- Both buttons on LEFT side show tooltips on RIGHT
- Mobile: tooltips appear on TOP (like macOS Dock)
- Complete tooltip coverage for all action buttons
---
 templates/partials/color-theme-switcher.html | 4 ++--
 templates/partials/widgets/info-button.html  | 5 ++++-
 2 files changed, 6 insertions(+), 3 deletions(-)

diff --git a/templates/partials/color-theme-switcher.html b/templates/partials/color-theme-switcher.html
index f47430e..f9eb7a6 100644
--- a/templates/partials/color-theme-switcher.html
+++ b/templates/partials/color-theme-switcher.html
@@ -2,9 +2,9 @@
 <!-- Color Theme Switcher (Light/Dark/Auto) - Cycles on click -->
 <!-- IMPORTANT: This controls COLOR theme, NOT layout theme (.theme-clean) -->
 <button id="color-theme-switcher"
-        class="color-theme-switcher no-print"
+        class="color-theme-switcher no-print has-tooltip"
         aria-label="Toggle color theme"
-        title="Toggle color theme">
+        data-tooltip="Toggle color theme">
   <iconify-icon id="themeIcon" icon="mdi:theme-light-dark" width="28" height="28"></iconify-icon>
 </button>
 
diff --git a/templates/partials/widgets/info-button.html b/templates/partials/widgets/info-button.html
index c097319..bda2877 100644
--- a/templates/partials/widgets/info-button.html
+++ b/templates/partials/widgets/info-button.html
@@ -1,6 +1,9 @@
 {{define "info-button"}}
 <!-- Info Button (Bottom Left) -->
-<button id="info-button" class="info-button no-print" aria-label="{{if eq .Lang "es"}}Información{{else}}Information{{end}}" onclick="document.getElementById('info-modal').showModal()">
+<button id="info-button" class="info-button no-print has-tooltip"
+        aria-label="{{if eq .Lang "es"}}Información{{else}}Information{{end}}"
+        data-tooltip="{{if eq .Lang "es"}}Información{{else}}Information{{end}}"
+        onclick="document.getElementById('info-modal').showModal()">
     <iconify-icon icon="mdi:information-outline" width="24" height="24"></iconify-icon>
 </button>
 {{end}}