refactor(ui): replace native app tooltips

Wrap app controls with the shared Tooltip component and use cursor-positioned tooltip placement for icon buttons, chips, path labels, and media controls.

Leave native title attributes on the window chrome buttons so Minimize, Maximize, and Close keep platform-style behavior.

src-tauri/src/commands.rs

@@ -162,6 +162,8 @@ pub struct TagSearchParams {
     pub media_kind: Option<String>,
     pub favorites_only: Option<bool>,
     pub rating_min: Option<i64>,
+    /// Optional `[r, g, b]` color filter applied within the tag result set.
+    pub color: Option<[u8; 3]>,
     pub limit: Option<usize>,
     pub offset: Option<usize>,
 }
@@ -957,6 +959,7 @@ pub async fn search_images_by_tag(
     let conn = db.get().map_err(|e| e.to_string())?;
     let limit = params.limit.unwrap_or(64);
     let offset = params.offset.unwrap_or(0);
+    let color = params.color.map(|[r, g, b]| (r, g, b));
     let (images, total) = db::search_images_by_tag(
         &conn,
         &params.query,
@@ -964,6 +967,7 @@ pub async fn search_images_by_tag(
         params.media_kind.as_deref(),
         params.favorites_only.unwrap_or(false),
         params.rating_min.unwrap_or(0),
+        color,
         limit,
         offset,
     )

src-tauri/src/db.rs

@@ -2244,6 +2244,7 @@ pub fn search_images_by_tag(
     media_kind: Option<&str>,
     favorites_only: bool,
     rating_min: i64,
+    color: Option<(u8, u8, u8)>,
     limit: usize,
     offset: usize,
 ) -> Result<(Vec<ImageRecord>, usize)> {
@@ -2252,6 +2253,10 @@ pub fn search_images_by_tag(
         return Ok((Vec::new(), 0));
     }
     let favorites_flag = i64::from(favorites_only);
+    let (color_flag, qr, qg, qb) = match color {
+        Some((r, g, b)) => (1i64, r as i64, g as i64, b as i64),
+        None => (0, 0, 0, 0),
+    };
 
     // Total count (for pagination)
     let total: usize = conn.query_row(
@@ -2262,13 +2267,25 @@ pub fn search_images_by_tag(
            AND (?2 IS NULL OR i.media_kind = ?2)
            AND (?3 = 0 OR i.favorite = 1)
            AND i.rating >= ?4
-           AND LOWER(TRIM(t.tag)) = ?5",
+           AND LOWER(TRIM(t.tag)) = ?5
+           AND (?6 = 0 OR EXISTS (
+               SELECT 1 FROM image_colors c
+               WHERE c.image_id = i.id
+                 AND c.weight >= ?11
+                 AND ((c.r - ?7)*(c.r - ?7) + (c.g - ?8)*(c.g - ?8) + (c.b - ?9)*(c.b - ?9)) <= ?10
+           ))",
         params![
             folder_id,
             media_kind,
             favorites_flag,
             rating_min,
-            normalized_query
+            normalized_query,
+            color_flag,
+            qr,
+            qg,
+            qb,
+            crate::color::MATCH_DISTANCE_SQ,
+            crate::color::MATCH_MIN_WEIGHT
         ],
         |row| row.get::<_, i64>(0),
     )? as usize;
@@ -2282,8 +2299,14 @@ pub fn search_images_by_tag(
            AND (?3 = 0 OR i.favorite = 1)
            AND i.rating >= ?4
            AND LOWER(TRIM(t.tag)) = ?5
+           AND (?6 = 0 OR EXISTS (
+               SELECT 1 FROM image_colors c
+               WHERE c.image_id = i.id
+                 AND c.weight >= ?11
+                 AND ((c.r - ?7)*(c.r - ?7) + (c.g - ?8)*(c.g - ?8) + (c.b - ?9)*(c.b - ?9)) <= ?10
+           ))
          ORDER BY i.rating DESC, i.modified_at DESC NULLS LAST, i.filename ASC
-         LIMIT ?6 OFFSET ?7",
+         LIMIT ?12 OFFSET ?13",
     )?;
 
     let image_ids = stmt
@@ -2294,6 +2317,12 @@ pub fn search_images_by_tag(
                 favorites_flag,
                 rating_min,
                 normalized_query,
+                color_flag,
+                qr,
+                qg,
+                qb,
+                crate::color::MATCH_DISTANCE_SQ,
+                crate::color::MATCH_MIN_WEIGHT,
                 limit as i64,
                 offset as i64
             ],

src/components/BackgroundTasks.tsx

@@ -2,6 +2,7 @@ import { useEffect, useMemo, useState } from "react";
 import { invoke } from "@tauri-apps/api/core";
 import { revealItemInDir } from "@tauri-apps/plugin-opener";
 import { useGalleryStore, WorkerKey } from "../store";
+import { Tooltip } from "./Tooltip";
 
 const WORKER_FOR_STAGE: Record<string, WorkerKey> = {
   Thumbnails: "thumbnail",
@@ -52,15 +53,16 @@ function FailedWorkerItemRow({ item }: { item: FailedWorkerItem }) {
           <p className="truncate text-[9px] text-gray-600">{item.error}</p>
         )}
       </div>
+      <Tooltip label="Reveal in Explorer" anchorToCursor>
       <button
         className="shrink-0 text-gray-700 transition-colors hover:text-gray-300 light-theme:text-gray-600 light-theme:hover:text-gray-100"
-        title="Reveal in Explorer"
         onClick={() => void revealItemInDir(item.path)}
       >
         <svg className="h-3 w-3" fill="none" viewBox="0 0 24 24" stroke="currentColor">
           <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M3 7a2 2 0 012-2h4l2 2h8a2 2 0 012 2v8a2 2 0 01-2 2H5a2 2 0 01-2-2V7z" />
         </svg>
       </button>
+      </Tooltip>
     </div>
   );
 }
@@ -378,9 +380,9 @@ export function BackgroundTasks() {
                   {stage.detail}
                 </span>
                 {workerKey && (
+                  <Tooltip label={isPaused ? `Resume ${stage.label}` : `Pause ${stage.label}`} anchorToCursor>
                   <button
                     className="ml-0.5 opacity-0 group-hover:opacity-100 hover:text-white transition-opacity"
-                    title={isPaused ? `Resume ${stage.label}` : `Pause ${stage.label}`}
                     onClick={(e) => { e.stopPropagation(); toggleWorker(primary.id, workerKey); }}
                   >
                     {isPaused ? (
@@ -393,6 +395,7 @@ export function BackgroundTasks() {
                       </svg>
                     )}
                   </button>
+                </Tooltip>
               )}
               </span>
             );
@@ -455,15 +458,16 @@ export function BackgroundTasks() {
 
         {/* Dismiss — hidden for system tasks like duplicate scan */}
         {primary.id >= 0 && (
+          <Tooltip label="Dismiss" anchorToCursor>
           <button
             className="p-1 rounded-md text-gray-600 hover:text-gray-300 hover:bg-white/8 transition-colors shrink-0"
-            title="Dismiss"
             onClick={(e) => { e.stopPropagation(); dismissTask(primary.id, primary.snapshot); }}
           >
             <svg className="h-3.5 w-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
               <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
             </svg>
           </button>
+        </Tooltip>
       )}
       </div>
 
@@ -508,9 +512,9 @@ export function BackgroundTasks() {
                             {stage.detail}
                           </span>
                           {workerKey && (
+                            <Tooltip label={isPaused ? `Resume ${stage.label}` : `Pause ${stage.label}`} anchorToCursor>
                             <button
                               className="ml-0.5 text-gray-600 hover:text-white transition-colors"
-                              title={isPaused ? `Resume ${stage.label}` : `Pause ${stage.label}`}
                               onClick={() => toggleWorker(task.id, workerKey)}
                             >
                               {isPaused ? (
@@ -523,6 +527,7 @@ export function BackgroundTasks() {
                                 </svg>
                               )}
                             </button>
+                          </Tooltip>
                         )}
                         </span>
                       );
@@ -565,15 +570,16 @@ export function BackgroundTasks() {
                   )}
 
                   {task.id >= 0 && (
+                    <Tooltip label="Dismiss" anchorToCursor>
                     <button
                       className="p-1 rounded-md text-gray-600 hover:text-gray-300 hover:bg-white/8 transition-colors shrink-0"
-                      title="Dismiss"
                       onClick={() => dismissTask(task.id, task.snapshot)}
                     >
                       <svg className="h-3 w-3" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                         <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
                       </svg>
                     </button>
+                    </Tooltip>
                   )}
                 </div>
 

src/components/BulkActionBar.tsx

@@ -1,6 +1,7 @@
 import { useEffect, useRef, useState } from "react";
 import { useGalleryStore } from "../store";
 import { BulkTagPopover } from "./bulk/BulkTagPopover";
+import { Tooltip } from "./Tooltip"
 
 type Panel = "tag" | "rating" | "album" | "delete" | null;
 
@@ -93,13 +94,14 @@ export function BulkActionBar() {
       <div className="flex items-center gap-2 px-1.5">
         <span className="text-xs font-medium text-white">{selectedCount} selected</span>
         {loadedCount < totalImages || loadedCount > selectedCount ? (
+          <Tooltip label={loadedCount < totalImages ? "Selects loaded items only" : "Select all loaded"}>
           <button
             className="text-[11px] text-gray-500 transition-colors hover:text-gray-300"
             onClick={selectAllGallery}
-            title={loadedCount < totalImages ? "Selects loaded items only" : "Select all loaded"}
           >
             Select all{loadedCount < totalImages ? " loaded" : ""}
           </button>
+        </Tooltip>
       ) : null}
       </div>
 
@@ -124,6 +126,7 @@ export function BulkActionBar() {
             {Array.from({ length: 5 }, (_, index) => {
               const rating = index + 1;
               return (
+                <Tooltip label={`Set ${rating} star${rating === 1 ? "" : "s"}`}>
                 <button
                   key={rating}
                   className="rounded-md p-1 text-white/25 transition-colors hover:bg-white/5 hover:text-amber-300"
@@ -131,12 +134,12 @@ export function BulkActionBar() {
                     await bulkSetRating(rating);
                     setPanel(null);
                   }}
-                  title={`Set ${rating} star${rating === 1 ? "" : "s"}`}
                 >
                   <svg className="h-4 w-4" fill="currentColor" viewBox="0 0 20 20">
                     <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.176 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81H7.03a1 1 0 00.951-.69l1.07-3.292z" />
                   </svg>
                 </button>
+                </Tooltip>
               );
             })}
             <button
@@ -151,11 +154,11 @@ export function BulkActionBar() {
           </div>
         ) : null}
       </div>
-
-      <button className={btnIdle} onClick={() => void bulkSetFavorite(true)} title="Mark as favorite">
+      <Tooltip label="Mark as favorite" followCursor>
+        <button className={btnIdle} onClick={() => void bulkSetFavorite(true)}>
           Favorite
         </button>
-
+      </Tooltip>
       <div className="relative">
         <button className={panel === "album" ? btnActive : btnIdle} onClick={() => togglePanel("album")}>
           Add to album
@@ -219,14 +222,15 @@ export function BulkActionBar() {
       <div className="h-5 w-px bg-white/10" />
 
       <div className="relative">
+        <Tooltip label="Delete files from disk" followCursor>
         <button
           className={panel === "delete" ? `${btn} bg-red-500/15 text-red-300` : `${btn} text-gray-300 hover:bg-red-500/10 hover:text-red-300`}
           onClick={() => togglePanel("delete")}
           disabled={deleting}
-          title="Delete files from disk"
         >
           {deleting ? "Deleting…" : "Delete"}
         </button>
+        </Tooltip>
         {panel === "delete" ? (
           <div
             data-bulk-popover
@@ -261,16 +265,16 @@ export function BulkActionBar() {
           </div>
         ) : null}
       </div>
-
+        <Tooltip label="Clear selection" followCursor>
       <button
         className="rounded-md p-1.5 text-gray-500 transition-colors hover:bg-white/[0.06] hover:text-white"
         onClick={clearGallerySelection}
-        title="Clear selection"
       >
         <svg className="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
           <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
         </svg>
       </button>
+      </Tooltip>
     </div>
   );
 }

src/components/ColorFilter.tsx

@@ -59,7 +59,7 @@ export function ColorFilter() {
     <div ref={ref} className="relative ml-1 flex shrink-0 items-center border-l border-white/6 pl-2">
       {/* Trigger — a single palette icon; shows the active color as a dot when a
           filter is applied so the collapsed state still communicates it. */}
-      <Tooltip label={isActive ? "Color filter active" : "Filter by color"} delay={400}>
+      <Tooltip label={isActive ? "Color filter active" : "Filter by color"} delay={400} anchorToCursor>
         <button
           className={`relative flex items-center gap-1.5 rounded-lg px-2 py-1.5 transition-colors ${
             open || isActive ? "bg-white/10 text-white" : "text-gray-500 hover:bg-white/5 hover:text-gray-200"
@@ -130,27 +130,28 @@ export function ColorFilter() {
                   value={colorFilter ? toHex(colorFilter) : "#3b7dd8"}
                   onChange={(event) => setColorFilter(fromHex(event.target.value))}
                 />
-              </label></Tooltip>
+              </label>
+              </Tooltip>
             </div>
 
             {isActive || (colorBackfill && colorBackfill.total > 0) ? (
               <div className="mt-2 flex items-center justify-between gap-3 border-t border-white/6 pt-2 light-theme:border-gray-700/40">
                 {colorBackfill && colorBackfill.total > 0 ? (
-                  <span
-                    className="text-[10px] text-gray-600"
-                    title="Sampling colors from existing thumbnails — color search fills in as this runs"
-                  >
+                  <Tooltip label="Sampling colours from existing thumbnails — colour search fills in as this runs" anchorToCursor>
+                    <span className="text-[10px] text-gray-600">
                       sampling {colorBackfill.processed.toLocaleString()}/{colorBackfill.total.toLocaleString()}
                     </span>
+                  </Tooltip>
                 ) : <span />}
                 {isActive ? (
+                  <Tooltip label="Clear colour filter" anchorToCursor>
                   <button
                     className="shrink-0 rounded px-1 text-[11px] text-gray-500 transition-colors hover:text-gray-200"
                     onClick={() => setColorFilter(null)}
-                    title="Clear color filter"
                   >
                     Clear
                   </button>
+                  </Tooltip>
                 ) : null}
               </div>
             ) : null}

src/components/DuplicateFinder.tsx

@@ -3,6 +3,7 @@ import { useVirtualizer } from "@tanstack/react-virtual";
 import { DuplicateGroup, useGalleryStore } from "../store";
 import { FolderScopeDropdown } from "./FolderScopeDropdown";
 import { mediaSrc } from "../lib/mediaSrc";
+import { Tooltip } from "./Tooltip";
 
 function formatBytes(bytes: number): string {
   if (bytes >= 1_073_741_824) return `${(bytes / 1_073_741_824).toFixed(1)} GB`;
@@ -70,6 +71,7 @@ function DuplicateGroupCard({ group }: { group: DuplicateGroup }) {
           const isSelected = selectedIds.has(image.id);
           const src = mediaSrc(image.thumbnail_path);
           return (
+            <Tooltip label={image.path} anchorToCursor>
             <button
               key={image.id}
               className={`media-dark-surface group relative overflow-hidden rounded-xl border transition-all ${
@@ -79,7 +81,6 @@ function DuplicateGroupCard({ group }: { group: DuplicateGroup }) {
               }`}
               style={{ width: 140, height: 105 }}
               onClick={() => toggleDuplicateSelected(image.id)}
-              title={image.path}
             >
               {src ? (
                 <img src={src} alt="" className="h-full w-full object-cover" draggable={false} />
@@ -99,6 +100,7 @@ function DuplicateGroupCard({ group }: { group: DuplicateGroup }) {
                 <p className="truncate text-[9px] text-white/60">{image.path.split(/[\\/]/).slice(-2).join("/")}</p>
               </div>
             </button>
+            </Tooltip>
           );
         })}
       </div>
@@ -206,13 +208,14 @@ export function DuplicateFinder() {
             <FolderScopeDropdown />
             {/* Batch select — only shown when there are groups and nothing is selected yet */}
             {hasResults && selectedCount === 0 && !deleting && (
+              <Tooltip label={`Mark ${totalDuplicateImages} duplicate${totalDuplicateImages === 1 ? "" : "s"} for deletion across all groups (keeps first in each)`} anchorToCursor>
               <button
                 className="rounded-lg border border-white/10 bg-white/[0.04] px-3 py-1.5 text-xs text-gray-400 transition-colors hover:bg-white/[0.07] hover:text-white light-theme:border-gray-700/50 light-theme:bg-gray-900 light-theme:text-white light-theme:hover:bg-gray-800 light-theme:hover:text-white"
                 onClick={selectKeepFirstAllGroups}
-                title={`Mark ${totalDuplicateImages} duplicate${totalDuplicateImages === 1 ? "" : "s"} for deletion across all groups (keeps first in each)`}
               >
                 Select all duplicates
               </button>
+              </Tooltip>
             )}
             {selectedCount > 0 ? (
               <>

src/components/ExploreView.tsx

@@ -161,6 +161,7 @@ function CloudCard({ node, onOpen, animated }: { node: PlacedNode; onOpen: (imag
   };
 
   return (
+    <Tooltip label={`Open cluster — ${node.entry.count.toLocaleString()} ${node.entry.count === 1 ? "image" : "images"}`} followCursor>
     <motion.button
       className="explore-cluster-card group absolute overflow-hidden rounded-2xl border border-white/8 bg-white/[0.04] text-left shadow-[0_8px_28px_rgba(0,0,0,0.38)] focus:outline-none focus-visible:ring-2 focus-visible:ring-white/30"
       style={{ width: w, height: h, left: node.x - w / 2, top: node.y - h / 2, zIndex: node.zIndex }}
@@ -189,7 +190,6 @@ function CloudCard({ node, onOpen, animated }: { node: PlacedNode; onOpen: (imag
       }
       whileHover={{ scale: 1.06, rotate: 0, zIndex: 500, transition: { duration: 0.18 } }}
       onClick={() => onOpen(node.entry.image_ids)}
-      title={`Open cluster — ${node.entry.count.toLocaleString()} ${node.entry.count === 1 ? "image" : "images"}`}
     >
       {src ? (
         <img
@@ -223,6 +223,7 @@ function CloudCard({ node, onOpen, animated }: { node: PlacedNode; onOpen: (imag
         Open
       </span>
     </motion.button>
+    </Tooltip>
   );
 }
 

src/components/FolderPickerModal.tsx

@@ -1,6 +1,7 @@
 import { useEffect, useMemo, useRef, useState } from "react";
 import { useVirtualizer } from "@tanstack/react-virtual";
 import { DirEntry, DirListing, FolderAddResult, useGalleryStore } from "../store";
+import { Tooltip } from "./Tooltip";
 
 function normalizePath(path: string): string {
   return path.replace(/\\/g, "/").replace(/\/+$/, "").toLowerCase();
@@ -95,17 +96,18 @@ function FolderRow({
         </svg>
       </button>
 
+      <Tooltip label={entry.path} anchorToCursor className="min-w-0 flex-1">
         <button
           type="button"
-        className="flex min-w-0 flex-1 items-center gap-2 text-left"
+          className="flex w-full min-w-0 items-center gap-2 text-left"
           onClick={onNavigate}
-        title={entry.path}
         >
           <svg className="h-4 w-4 shrink-0 text-amber-300/90" fill="currentColor" viewBox="0 0 24 24">
             <path d="M3 6.5A2.5 2.5 0 015.5 4h4.1l2 2H18.5A2.5 2.5 0 0121 8.5v9A2.5 2.5 0 0118.5 20h-13A2.5 2.5 0 013 17.5v-11z" />
           </svg>
           <span className="truncate text-sm">{entry.name}</span>
         </button>
+      </Tooltip>
 
       {alreadyAdded ? (
         <span className="rounded-md border border-white/10 bg-white/[0.04] px-2 py-0.5 text-[11px] text-gray-500 light-theme:border-gray-700/40 light-theme:bg-gray-950">
@@ -113,16 +115,17 @@ function FolderRow({
         </span>
       ) : null}
 
+      <Tooltip label={entry.has_children ? "Open folder" : "No subfolders"} anchorToCursor>
         <button
           type="button"
           className="rounded-md p-1 text-gray-500 transition-colors hover:bg-white/[0.06] hover:text-white light-theme:hover:bg-gray-900 light-theme:hover:text-white"
           onClick={onNavigate}
-        title={entry.has_children ? "Open folder" : "No subfolders"}
         >
           <svg className={`h-4 w-4 ${entry.has_children ? "" : "opacity-45"}`} fill="none" viewBox="0 0 24 24" stroke="currentColor">
             <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
           </svg>
         </button>
+      </Tooltip>
     </div>
   );
 }
@@ -164,11 +167,8 @@ function StagedFoldersPanel({
         ) : (
           <div className="space-y-2">
             {stagedPaths.map((path) => (
-              <div
-                key={path}
-                className="group flex min-h-12 items-center gap-2 rounded-md border border-white/[0.07] bg-white/[0.045] px-3 py-2 text-gray-200 transition-colors hover:border-white/15 hover:bg-white/[0.07] light-theme:border-gray-700/40 light-theme:bg-gray-900 light-theme:text-white light-theme:hover:bg-gray-800"
-                title={path}
-              >
+              <Tooltip key={path} label={path} anchorToCursor block>
+                <div className="group flex min-h-12 items-center gap-2 rounded-md border border-white/[0.07] bg-white/[0.045] px-3 py-2 text-gray-200 transition-colors hover:border-white/15 hover:bg-white/[0.07] light-theme:border-gray-700/40 light-theme:bg-gray-900 light-theme:text-white light-theme:hover:bg-gray-800">
                   <svg className="h-4 w-4 shrink-0 text-amber-300/90" fill="currentColor" viewBox="0 0 24 24">
                     <path d="M3 6.5A2.5 2.5 0 015.5 4h4.1l2 2H18.5A2.5 2.5 0 0121 8.5v9A2.5 2.5 0 0118.5 20h-13A2.5 2.5 0 013 17.5v-11z" />
                   </svg>
@@ -176,18 +176,20 @@ function StagedFoldersPanel({
                     <p className="truncate text-sm font-medium">{folderName(path)}</p>
                     <p className="mt-0.5 truncate text-[11px] text-gray-600 light-theme:text-gray-500">{path}</p>
                   </div>
+                  <Tooltip label="Remove from folders to add" anchorToCursor>
                     <button
                       type="button"
                       className="rounded-md p-1 text-gray-500 opacity-80 transition-colors hover:bg-white/[0.08] hover:text-white group-hover:opacity-100 light-theme:hover:bg-gray-700"
                       onClick={() => onRemove(path)}
                       aria-label={`Remove ${path} from folders to add`}
-                  title="Remove from folders to add"
                     >
                       <svg className="h-3.5 w-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                         <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
                       </svg>
                     </button>
+                  </Tooltip>
                 </div>
+              </Tooltip>
             ))}
           </div>
         )}
@@ -327,16 +329,17 @@ export function FolderPickerModal() {
               <p className="text-base font-semibold text-white">Add media folders</p>
               <p className="mt-1 text-xs text-gray-500 light-theme:text-gray-600">Choose folders from any location, then add them together.</p>
             </div>
+            <Tooltip label="Close folder picker" anchorToCursor>
               <button
                 type="button"
                 className="rounded-md p-1.5 text-gray-500 transition-colors hover:bg-white/[0.06] hover:text-white light-theme:hover:bg-gray-900 light-theme:hover:text-white"
                 onClick={() => setFolderPickerOpen(false)}
-              title="Close folder picker"
               >
                 <svg className="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                   <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
                 </svg>
               </button>
+            </Tooltip>
           </div>
         </header>
 
@@ -355,14 +358,15 @@ export function FolderPickerModal() {
                 {breadcrumbs.map((crumb, index) => (
                   <span key={`${crumb.path ?? "root"}-${index}`} className="flex min-w-0 items-center gap-1">
                     {index > 0 ? <span className="text-gray-700 light-theme:text-gray-400">/</span> : null}
+                    <Tooltip label={crumb.path ?? "Roots"} anchorToCursor>
                       <button
                         type="button"
                         className="max-w-40 truncate rounded px-1.5 py-0.5 text-xs text-gray-400 transition-colors hover:bg-white/[0.06] hover:text-white light-theme:text-gray-500 light-theme:hover:bg-gray-800 light-theme:hover:text-white"
                         onClick={() => setCurrentPath(crumb.path)}
-                      title={crumb.path ?? "Roots"}
                       >
                         {crumb.label}
                       </button>
+                    </Tooltip>
                   </span>
                 ))}
               </nav>

src/components/FolderScopeDropdown.tsx

@@ -1,5 +1,6 @@
 import { useEffect, useRef, useState } from "react";
 import { useGalleryStore } from "../store";
+import { Tooltip } from "./Tooltip";
 
 /**
  * In-view folder scope picker for feature views (Timeline / Explore /
@@ -34,6 +35,7 @@ export function FolderScopeDropdown() {
 
   return (
     <div ref={ref} className="feature-scope-dropdown relative">
+      <Tooltip label="Change folder scope" anchorToCursor>
         <button
           onClick={() => setOpen((v) => !v)}
           className={`feature-scope-trigger flex max-w-56 items-center gap-1.5 rounded-lg border px-3 py-1.5 text-xs transition-colors ${
@@ -41,7 +43,6 @@ export function FolderScopeDropdown() {
               ? "border-white/15 bg-white/8 text-white light-theme:border-gray-700/50 light-theme:bg-gray-900 light-theme:text-white"
               : "border-white/8 bg-transparent text-gray-400 hover:border-white/15 hover:text-gray-200 light-theme:border-gray-700/40 light-theme:text-gray-600 light-theme:hover:border-gray-700 light-theme:hover:bg-gray-900 light-theme:hover:text-white"
           }`}
-        title="Change folder scope"
         >
           <svg className="h-3.5 w-3.5 shrink-0 text-gray-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
             <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M3 7v10a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2h-6l-2-2H5a2 2 0 00-2 2z" />
@@ -54,6 +55,7 @@ export function FolderScopeDropdown() {
             <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" />
           </svg>
         </button>
+      </Tooltip>
       {open ? (
         <div className="feature-scope-menu absolute right-0 top-full z-30 mt-1.5 max-h-80 min-w-52 overflow-y-auto rounded-xl border border-white/10 bg-gray-950/98 p-1 shadow-2xl backdrop-blur light-theme:border-gray-700/50">
           <button

src/components/Gallery.tsx

@@ -75,11 +75,10 @@ export function ContextMenu({
         {Array.from({ length: 5 }, (_, index) => {
           const rating = index + 1;
           return (
+            <Tooltip key={rating} label={`Set ${rating} star rating`} followCursor>
               <button
-              key={rating}
                 className="rounded-md p-1 transition-colors hover:bg-white/5"
                 onClick={async () => { await updateImageDetails(image.id, { rating }); onClose(); }}
-              title={`Set ${rating} star rating`}
               >
                 <svg
                   className={`h-4 w-4 ${rating <= image.rating ? "text-amber-300" : "text-white/20 hover:text-white/40"}`}
@@ -88,18 +87,20 @@ export function ContextMenu({
                   <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.176 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81H7.03a1 1 0 00.951-.69l1.07-3.292z" />
                 </svg>
               </button>
+            </Tooltip>
           );
         })}
         {image.rating > 0 ? (
+          <Tooltip label="Remove rating" followCursor>
             <button
               className="ml-1 rounded-md p-1 text-gray-600 hover:bg-white/5 hover:text-gray-300 transition-colors"
               onClick={async () => { await updateImageDetails(image.id, { rating: 0 }); onClose(); }}
-            title="Remove rating"
             >
               <svg className="h-3 w-3" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                 <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
               </svg>
             </button>
+          </Tooltip>
         ) : null}
       </div>
     </div>
@@ -126,7 +127,6 @@ export function ImageTile({
   const src = mediaSrc(image.thumbnail_path);
 
   return (
-    <Tooltip label={image.filename} delay={500} block followCursor>
     <div
       className={`media-dark-surface group relative overflow-hidden rounded-xl bg-white/[0.04] text-left focus:outline-none transition-shadow ${
         selected ? "ring-2 ring-inset ring-blue-400/80" : ""
@@ -221,15 +221,14 @@ export function ImageTile({
       {/* Persistent badges — only shown when meaningful */}
       <div className="absolute top-2 right-2 flex flex-col items-end gap-1 pointer-events-none">
         {image.embedding_status === "failed" && (
-          <div
-            className="flex items-center gap-1 rounded-md bg-black/60 px-1.5 py-0.5 text-[10px] font-medium text-amber-400 backdrop-blur-sm"
-            title={image.embedding_error ?? "Embedding failed"}
-          >
+          <Tooltip label={image.embedding_error ?? "Embedding failed"} followCursor className="pointer-events-auto">
+            <div className="flex items-center gap-1 rounded-md bg-black/60 px-1.5 py-0.5 text-[10px] font-medium text-amber-400 backdrop-blur-sm">
               <svg className="h-2.5 w-2.5 shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                 <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2.5}
                   d="M12 9v2m0 4h.01M10.29 3.86L1.82 18a2 2 0 001.71 3h16.94a2 2 0 001.71-3L13.71 3.86a2 2 0 00-3.42 0z" />
               </svg>
             </div>
+          </Tooltip>
         )}
         {image.favorite && (
           <div className="rounded-full bg-black/50 p-1 text-rose-400 backdrop-blur-sm">
@@ -258,8 +257,8 @@ export function ImageTile({
       <div className="absolute inset-0 bg-gradient-to-t from-black/85 via-black/30 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-200 pointer-events-none" />
 
       {/* Hover info — appears with overlay */}
-      <div className="absolute bottom-0 left-0 right-0 p-2.5 translate-y-1 group-hover:translate-y-0 opacity-0 group-hover:opacity-100 transition-all duration-200">
-        <p className="truncate text-[12px] font-medium text-white leading-tight">{image.filename}</p>
+      <div className="absolute bottom-0 left-0 right-0 z-20 p-2.5 translate-y-1 group-hover:translate-y-0 opacity-0 group-hover:opacity-100 transition-all duration-200">
+        <TruncatedFilename filename={image.filename} />
         <div className="mt-1.5 flex items-center justify-between gap-2">
           {image.rating > 0 ? (
             <div className="flex items-center gap-0.5">
@@ -290,6 +289,37 @@ export function ImageTile({
         </div>
       </div>
     </div>
+  );
+}
+
+function TruncatedFilename({ filename }: { filename: string }) {
+  const textRef = useRef<HTMLParagraphElement>(null);
+  const [isTruncated, setIsTruncated] = useState(false);
+
+  useLayoutEffect(() => {
+    const text = textRef.current;
+    if (!text) return;
+
+    const update = () => {
+      setIsTruncated(text.scrollWidth > text.clientWidth);
+    };
+
+    update();
+
+    const observer = new ResizeObserver(update);
+    observer.observe(text);
+    return () => observer.disconnect();
+  }, [filename]);
+
+  const label = (
+    <p ref={textRef} className="truncate text-[12px] font-medium leading-tight text-white">
+      {filename}
+    </p>
+  );
+
+  return (
+    <Tooltip label={filename} delay={500} block followCursor disabled={!isTruncated}>
+      {label}
     </Tooltip>
   );
 }

src/components/Lightbox.tsx

@@ -5,6 +5,7 @@ import { revealItemInDir } from "@tauri-apps/plugin-opener";
 import { useGalleryStore, ImageTag, ImageExif, AiRating } from "../store";
 import { VideoPlayer } from "./VideoPlayer";
 import { mediaSrc } from "../lib/mediaSrc";
+import { Tooltip } from "./Tooltip";
 
 function formatBytes(bytes: number): string {
   if (bytes < 1024) return `${bytes} B`;
@@ -525,15 +526,17 @@ export function Lightbox() {
                     <p className="text-xs text-gray-500">Details</p>
                   </div>
                   <div className="flex items-center gap-2">
+                    <Tooltip label= { selectedImage.favorite ? "Remove favorite" : "Add favorite" } followCursor>
                     <button
                       className={`rounded-full border p-2 ${selectedImage.favorite ? "border-rose-400/40 bg-rose-500/10 text-rose-300" : "border-white/10 bg-white/5 text-gray-400 hover:text-white"}`}
                       onClick={() => void updateImageDetails(selectedImage.id, { favorite: !selectedImage.favorite })}
-                      title={selectedImage.favorite ? "Remove favorite" : "Add favorite"}
                     >
                       <svg className="h-4 w-4" fill="currentColor" viewBox="0 0 20 20">
                         <path d="M3.172 5.172a4 4 0 015.656 0L10 6.343l1.172-1.171a4 4 0 115.656 5.656L10 17.657l-6.828-6.829a4 4 0 010-5.656z" />
                       </svg>
                     </button>
+                    </Tooltip>
+                    <Tooltip label= {canFindSimilar ? "Find similar images" : "Embeddings not ready"} followCursor>
                     <button
                       className={`flex items-center gap-1.5 rounded-full border px-2 py-1.5 text-xs lg:px-3 ${
                         canFindSimilar
@@ -545,7 +548,6 @@ export function Lightbox() {
                         void findSimilar(selectedImage.id, selectedImage.folder_id);
                       }}
                       disabled={!canFindSimilar}
-                      title={canFindSimilar ? "Find similar images" : "Embeddings not ready"}
                     >
                       <svg className="h-4 w-4 shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                         <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.6}
@@ -555,6 +557,7 @@ export function Lightbox() {
                       </svg>
                       <span className="hidden lg:inline">{canFindSimilar ? "Similar" : "Embeddings not ready"}</span>
                     </button>
+                    </Tooltip>
                   </div>
                   <button className="rounded p-1 text-gray-400 hover:text-white" onClick={closeImage}>
                     <svg className="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
@@ -566,6 +569,7 @@ export function Lightbox() {
                 {/* Search region button row */}
                 {canSearchRegion && (
                   <div className="shrink-0 px-5 pb-3">
+                    <Tooltip label={ regionSelectMode ? "Cancel region selection" : "Draw a region on the image to search for similar content" } followCursor>
                     <button
                       className={`w-full rounded-lg border px-3 py-2 text-xs transition-colors ${
                         regionSelectMode
@@ -581,7 +585,6 @@ export function Lightbox() {
                         setIsDragging(false);
                       }}
                       disabled={regionSearching}
-                      title={regionSelectMode ? "Cancel region selection" : "Draw a region on the image to search for similar content"}
                     >
                       {regionSearching ? (
                         <span className="flex items-center justify-center gap-1.5">
@@ -607,6 +610,7 @@ export function Lightbox() {
                         </span>
                       )}
                     </button>
+                  </Tooltip>
                   </div>
                 )}
 
@@ -618,11 +622,11 @@ export function Lightbox() {
                       {Array.from({ length: 5 }, (_, index) => {
                         const rating = index + 1;
                         return (
+                          <Tooltip label={`Set ${rating} star rating`} followCursor delay={750}>
                           <button
                             key={rating}
                             className="rounded-md p-1"
                             onClick={() => void updateImageDetails(selectedImage.id, { rating })}
-                            title={`Set ${rating} star rating`}
                           >
                             <svg
                               className={`h-5 w-5 ${rating <= selectedImage.rating ? "text-amber-300" : "text-white/20 hover:text-white/50"}`}
@@ -632,18 +636,20 @@ export function Lightbox() {
                               <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.176 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81H7.03a1 1 0 00.951-.69l1.07-3.292z" />
                             </svg>
                           </button>
+                          </Tooltip>
                         );
                       })}
                       {selectedImage.rating > 0 ? (
+                        <Tooltip label="Remove rating" followCursor>
                           <button
                             className="ml-2 rounded-md border border-white/10 p-1.5 text-gray-400 hover:bg-white/5 hover:text-white"
                             onClick={() => void updateImageDetails(selectedImage.id, { rating: 0 })}
-                          title="Remove rating"
                           >
                             <svg className="h-3.5 w-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                               <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
                             </svg>
                           </button>
+                        </Tooltip>
                       ) : null}
                     </div>
                   </div>
@@ -717,10 +723,10 @@ export function Lightbox() {
                           </span>
                         ) : null}
                         {selectedImage.media_kind === "image" ? (
+                          <Tooltip label={!(taggerModelStatus?.ready ?? false) ? "WD Tagger model not downloaded" : "Queue AI tagging for this image"} followCursor>
                           <button
                             className="rounded-md border border-white/10 bg-white/5 px-2 py-0.5 text-[10px] text-gray-400 transition-colors hover:bg-white/10 hover:text-white disabled:cursor-not-allowed disabled:opacity-40"
                             disabled={!(taggerModelStatus?.ready ?? false) || taggingQueued}
-                            title={!(taggerModelStatus?.ready ?? false) ? "WD Tagger model not downloaded" : "Queue AI tagging for this image"}
                             onClick={() => {
                               setTaggingQueued(true);
                               void queueTaggingForImage(selectedImage.id).catch(() => undefined);
@@ -728,7 +734,7 @@ export function Lightbox() {
                           >
                             {taggingQueued ? "Queued" : "AI tags"}
                           </button>
-                        ) : null}
+                        </Tooltip>) : null}
                       </div>
                     </div>
 
@@ -736,16 +742,21 @@ export function Lightbox() {
                       <>
                         <div className="flex flex-wrap gap-1.5">
                           {(tagsExpanded ? imageTags : imageTags.slice(0, 8)).map((t) => (
-                            <span
+                            <Tooltip
                               key={t.id}
+                              label={t.source === "ai" && t.confidence !== null ? `AI confidence: ${(t.confidence * 100).toFixed(0)}%` : ""}
+                              followCursor
+                              disabled={t.source !== "ai" || t.confidence === null}
+                            >
+                              <span
                                 className={`group flex items-center gap-1 rounded-md border px-2 py-0.5 text-xs ${
                                   t.source === "ai"
                                     ? "border-sky-400/20 bg-sky-500/8 text-sky-300"
                                     : "border-white/10 bg-white/5 text-gray-300"
                                 }`}
-                              title={t.source === "ai" && t.confidence !== null ? `AI confidence: ${(t.confidence * 100).toFixed(0)}%` : undefined}
                               >
                                 {t.tag}
+                                <Tooltip label="Remove tag" followCursor>
                                   <button
                                     className="text-gray-600 opacity-0 transition-opacity hover:text-white group-hover:opacity-100"
                                     onClick={() => {
@@ -753,13 +764,14 @@ export function Lightbox() {
                                         setImageTags((prev) => prev.filter((x) => x.id !== t.id)),
                                       );
                                     }}
-                                title="Remove tag"
                                   >
                                     <svg className="h-3 w-3" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                       <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
                                     </svg>
                                   </button>
+                                </Tooltip>
                               </span>
+                            </Tooltip>
                           ))}
                         </div>
                         {imageTags.length > 8 && (
@@ -914,9 +926,9 @@ export function Lightbox() {
                           </div>
                         ) : null}
                         {imageExif.gps_lat != null && imageExif.gps_lon != null ? (
+                          <Tooltip label="Open location in your browser" anchorToCursor>
                             <button
                               className="inline-flex items-center gap-1 text-xs text-sky-400 transition-colors hover:text-sky-300"
-                            title="Open location in your browser"
                               onClick={() =>
                                 void invoke("open_map_location", {
                                   params: { lat: imageExif.gps_lat, lon: imageExif.gps_lon },
@@ -929,6 +941,7 @@ export function Lightbox() {
                                   d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14" />
                               </svg>
                             </button>
+                          </Tooltip>
                         ) : null}
                       </div>
                     </div>
@@ -937,15 +950,16 @@ export function Lightbox() {
                   <div>
                     <div className="mb-1 flex items-center justify-between">
                       <p className="text-xs uppercase tracking-wider text-gray-500">Path</p>
+                      <Tooltip label="Reveal in Explorer" anchorToCursor>
                       <button
                         className="rounded p-0.5 text-gray-600 transition-colors hover:text-gray-300"
-                        title="Reveal in Explorer"
                         onClick={() => void revealItemInDir(selectedImage.path)}
                       >
                         <svg className="h-3.5 w-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                           <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M3 7a2 2 0 012-2h4l2 2h8a2 2 0 012 2v8a2 2 0 01-2 2H5a2 2 0 01-2-2V7z" />
                         </svg>
                       </button>
+                      </Tooltip>
                     </div>
                     <p className="break-all text-xs text-gray-400">{selectedImage.path}</p>
                   </div>

src/components/SettingsModal.tsx

@@ -3,6 +3,7 @@ import { AppTheme, CleanupOrphanedThumbnailsResult, DatabaseInfo, OrphanedThumbn
 import { FfmpegStatusRow } from "./onboarding/StepWelcome";
 import { ThemedDropdown } from "./ThemedDropdown";
 import { getChangelogForVersion } from "../changelog";
+import { Tooltip } from "./Tooltip";
 
 type SettingsSection = "workspace" | "general";
 
@@ -394,15 +395,16 @@ export function SettingsModal() {
           </div>
         </aside>
 
+        <Tooltip label="Close settings" anchorToCursor className="absolute right-4 top-4 z-10">
           <button
-          className="absolute right-4 top-4 z-10 rounded-md p-1.5 text-gray-500 transition-colors hover:bg-white/[0.06] hover:text-white"
+            className="rounded-md p-1.5 text-gray-500 transition-colors hover:bg-white/[0.06] hover:text-white"
             onClick={() => setSettingsOpen(false)}
-          title="Close settings"
           >
             <svg className="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
               <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
             </svg>
           </button>
+        </Tooltip>
 
         <main className="min-w-0 flex-1 overflow-y-auto">
           <div className="px-10 py-8">

src/components/Sidebar.tsx

@@ -4,6 +4,7 @@ import { open } from "@tauri-apps/plugin-dialog";
 import { useGalleryStore, Folder, Album, IndexProgress } from "../store";
 import { ThemedDropdown } from "./ThemedDropdown";
 import { mediaSrc } from "../lib/mediaSrc";
+import { Tooltip } from "./Tooltip";
 
 interface ContextMenuState {
   folderId: number;
@@ -181,10 +182,10 @@ function FolderItem({
         onContextMenu={handleContextMenu}
       >
         {customOrdering ? (
+          <Tooltip label={`Drag to reorder ${folder.name}`} followCursor delay={1000}>
           <button
             type="button"
             aria-label={`Reorder ${folder.name}`}
-            title={`Drag to reorder ${folder.name}`}
             className={`-ml-1 flex h-7 w-5 shrink-0 touch-none items-center justify-center rounded-md transition-colors ${
               dragging
                 ? "cursor-grabbing bg-white/10 text-gray-300"
@@ -208,6 +209,7 @@ function FolderItem({
               <circle cx="3" cy="9" r="1" /><circle cx="9" cy="9" r="1" />
             </svg>
           </button>
+          </Tooltip>
         ) : null}
         {isMissing ? (
           <span className="shrink-0 text-amber-400">
@@ -273,9 +275,9 @@ function FolderItem({
             </div>
           ) : (
             <div className="flex items-center gap-0.5 shrink-0 opacity-0 group-hover:opacity-100 transition-opacity">
+              <Tooltip label="Reindex" anchorToCursor>
                 <button
                   className="p-1 rounded text-gray-600 hover:text-gray-300 hover:bg-white/8 transition-colors"
-                title="Reindex"
                   onClick={(e) => { e.stopPropagation(); void reindexFolder(folder.id); }}
                 >
                   <svg className="w-3 h-3" fill="none" viewBox="0 0 24 24" stroke="currentColor">
@@ -283,9 +285,10 @@ function FolderItem({
                       d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15" />
                   </svg>
                 </button>
+              </Tooltip>
+              <Tooltip label="Remove from app" anchorToCursor>
                 <button
                   className="p-1 rounded text-gray-600 hover:text-red-400 hover:bg-red-500/10 transition-colors"
-                title="Remove from app"
                   onClick={(e) => { e.stopPropagation(); setConfirmingRemoval(true); }}
                 >
                   <svg className="w-3 h-3" fill="none" viewBox="0 0 24 24" stroke="currentColor">
@@ -293,6 +296,7 @@ function FolderItem({
                       d="M6 18L18 6M6 6l12 12" />
                   </svg>
                 </button>
+              </Tooltip>
             </div>
           )
         )}
@@ -499,10 +503,10 @@ function AlbumItem({
 
       {/* Drag handle — hover-revealed, reorders albums */}
       {reorderable ? (
+        <Tooltip label="Drag to reorder" anchorToCursor>
         <button
           type="button"
           aria-label={`Reorder ${album.name}`}
-          title="Drag to reorder"
           className="-ml-1 flex h-6 w-3.5 shrink-0 cursor-grab touch-none items-center justify-center rounded text-gray-700 opacity-0 transition-opacity hover:text-gray-400 group-hover:opacity-100"
           onPointerDown={(e) => {
             e.stopPropagation();
@@ -517,6 +521,7 @@ function AlbumItem({
             <circle cx="3" cy="9" r="1" /><circle cx="9" cy="9" r="1" />
           </svg>
         </button>
+      </Tooltip>
     ) : null}
 
       {/* Cover thumbnail — distinguishes albums from folder rows */}
@@ -833,15 +838,16 @@ export function Sidebar() {
       {/* Header */}
       <div className="flex items-center justify-between px-4 h-12 border-b border-white/[0.06] shrink-0">
         <span className="text-[13px] font-semibold text-white/80 tracking-wide">Phokus</span>
+        <Tooltip label="Add Media Folder" anchorToCursor>
         <button
           onClick={handleAddFolder}
           className="p-1.5 rounded-lg text-gray-500 hover:text-gray-200 hover:bg-white/8 transition-colors"
-          title="Add Media Folder"
         >
           <svg className="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
             <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.75} d="M12 4v16m8-8H4" />
           </svg>
         </button>
+        </Tooltip>
       </div>
 
       {/* Nav */}
@@ -985,26 +991,28 @@ export function Sidebar() {
           ) : (
             <div className="flex items-center gap-0.5">
               {albums.length > 0 ? (
+                <Tooltip label="Manage albums">
                 <button
                   onClick={() => setManageAlbums(true)}
                   className="rounded p-0.5 text-gray-600 transition-colors hover:bg-white/8 hover:text-gray-200"
-                  title="Manage albums"
                 >
                   <svg className="h-3.5 w-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                     <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.75}
                       d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z" />
                   </svg>
                 </button>
+                </Tooltip>
               ) : null}
+              <Tooltip label="New album">
               <button
                 onClick={startCreatingAlbum}
                 className="rounded p-0.5 text-gray-600 transition-colors hover:bg-white/8 hover:text-gray-200"
-                title="New album"
               >
                 <svg className="h-3.5 w-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                   <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.75} d="M12 4v16m8-8H4" />
                 </svg>
               </button>
+              </Tooltip>
             </div>
           )}
         </div>

src/components/Toolbar.tsx

@@ -327,20 +327,21 @@ export function Toolbar() {
               />
               {searchCommand !== null ? (
                 <div className="absolute left-8 top-1/2 -translate-y-1/2">
+                  <Tooltip label="Remove search command" anchorToCursor>
                     <button
                       type="button"
                       className="rounded-md border border-white/10 bg-white/[0.05] px-1.5 py-0.5 font-mono text-[11px] text-gray-300 transition-colors hover:bg-white/[0.08] hover:text-white"
                       onClick={() => { setSearchCommand(null); setTagSuggestions([]); }}
-                    title="Remove search command"
                     >
                       {commandPrefix(searchCommand)}
                     </button>
+                  </Tooltip>
                 </div>
               ) : null}
               {searchQuery.trim().length > 0 || searchCommand !== null ? (
+                <Tooltip label="Clear search" anchorToCursor className="absolute right-2 top-1/2 -translate-y-1/2">
                   <button
-                  className="absolute right-2 top-1/2 -translate-y-1/2 rounded-md p-1 text-gray-500 hover:bg-white/5 hover:text-gray-200 transition-colors"
-                  title="Clear search"
+                    className="rounded-md p-1 text-gray-500 hover:bg-white/5 hover:text-gray-200 transition-colors"
                     onClick={() => {
                       setSearchCommand(null);
                       setSearchQuery("");
@@ -352,6 +353,7 @@ export function Toolbar() {
                       <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
                     </svg>
                   </button>
+                </Tooltip>
               ) : null}
             </div>
           </div>

src/components/Tooltip.tsx

@@ -32,6 +32,7 @@ export function Tooltip({
   block = false,
   anchorToCursor = false,
   followCursor = false,
+  disabled = false,
   className = "",
   children,
 }: {
@@ -47,6 +48,8 @@ export function Tooltip({
   anchorToCursor?: boolean;
   /** Track the cursor (fixed position) instead of anchoring to a side. */
   followCursor?: boolean;
+  /** Render the wrapper but suppress tooltip display. */
+  disabled?: boolean;
   /** Extra classes for the wrapper (e.g. layout). */
   className?: string;
   children: ReactNode;
@@ -83,6 +86,7 @@ export function Tooltip({
     frame.current = undefined;
   };
   const show = (event: MouseEvent<HTMLElement>) => {
+    if (disabled) return;
     clear();
     if (anchorToCursor || followCursor) place(event.clientX, event.clientY);
     if (delay <= 0) {
@@ -110,6 +114,10 @@ export function Tooltip({
     return clear;
   }, []);
 
+  useEffect(() => {
+    if (disabled) hide();
+  }, [disabled]);
+
   const Wrapper = block ? "div" : "span";
   const cursorTooltip = (
     <motion.span
@@ -140,7 +148,7 @@ export function Tooltip({
       onPointerDown={hide}
     >
       {children}
-      {anchorToCursor || followCursor ? (
+      {disabled ? null : anchorToCursor || followCursor ? (
         mounted ? createPortal(cursorTooltip, document.body) : null
       ) : (
         <span

src/components/VideoPlayer.tsx

@@ -1,6 +1,7 @@
 import { useCallback, useEffect, useRef, useState } from "react";
 import { AnimatePresence, motion } from "framer-motion";
 import { useGalleryStore } from "../store";
+import { Tooltip } from "./Tooltip";
 
 const SPEED_OPTIONS = [0.25, 0.5, 0.75, 1, 1.25, 1.5, 2];
 const CONTROLS_HIDE_DELAY_MS = 2500;
@@ -26,23 +27,24 @@ interface BufferedRange {
   end: number;
 }
 
-function ControlButton({ onClick, title, active = false, children }: {
+function ControlButton({ onClick, label, active = false, children }: {
   onClick: () => void;
-  title: string;
+  label: string;
   active?: boolean;
   children: React.ReactNode;
 }) {
   return (
+    <Tooltip label={label} anchorToCursor>
       <button
         className={`rounded-md p-1.5 transition-colors ${active ? "text-white" : "text-gray-300 hover:text-white"} hover:bg-white/10`}
         onClick={(event) => {
           event.stopPropagation();
           onClick();
         }}
-      title={title}
       >
         {children}
       </button>
+    </Tooltip>
   );
 }
 
@@ -352,7 +354,7 @@ export function VideoPlayer({ src }: { src: string }) {
 
             {/* Control row */}
             <div className="mt-1 flex items-center gap-1.5">
-              <ControlButton onClick={togglePlay} title={playing ? "Pause (Space)" : "Play (Space)"}>
+              <ControlButton onClick={togglePlay} label={playing ? "Pause (Space)" : "Play (Space)"}>
                 {playing ? (
                   <svg className="h-5 w-5" fill="currentColor" viewBox="0 0 24 24">
                     <path d="M7 5h4v14H7zM13 5h4v14h-4z" />
@@ -371,7 +373,7 @@ export function VideoPlayer({ src }: { src: string }) {
               <div className="flex-1" />
 
               {/* Volume */}
-              <ControlButton onClick={toggleMute} title={muted ? "Unmute (M)" : "Mute (M)"}>
+              <ControlButton onClick={toggleMute} label={muted ? "Unmute (M)" : "Mute (M)"}>
                 {effectiveVolume === 0 ? (
                   <svg className="h-4.5 w-4.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
                     <path strokeLinecap="round" strokeLinejoin="round" d="M5.586 15H4a1 1 0 01-1-1v-4a1 1 0 011-1h1.586l4.707-4.707C10.923 3.663 12 4.109 12 5v14c0 .891-1.077 1.337-1.707.707L5.586 15z" />
@@ -384,6 +386,7 @@ export function VideoPlayer({ src }: { src: string }) {
                   </svg>
                 )}
               </ControlButton>
+              <Tooltip label="Volume (↑/↓)" anchorToCursor>
                 <input
                   type="range"
                   min={0}
@@ -393,21 +396,22 @@ export function VideoPlayer({ src }: { src: string }) {
                   className="h-1 w-20 cursor-pointer accent-white"
                   onChange={(event) => applyVolume(parseFloat(event.target.value), false)}
                   onClick={(event) => event.stopPropagation()}
-                title="Volume (↑/↓)"
                 />
+              </Tooltip>
 
               {/* Playback speed */}
               <div className="relative">
+                <Tooltip label="Playback speed" anchorToCursor>
                   <button
                     className={`min-w-12 rounded-md px-2 py-1.5 text-xs tabular-nums transition-colors hover:bg-white/10 ${playbackRate !== 1 ? "text-white" : "text-gray-300 hover:text-white"}`}
                     onClick={(event) => {
                       event.stopPropagation();
                       setSpeedMenuOpen((value) => !value);
                     }}
-                  title="Playback speed"
                   >
                     {playbackRate}×
                   </button>
+                </Tooltip>
                 {speedMenuOpen ? (
                   <div className="absolute bottom-full right-0 z-20 mb-2 min-w-20 rounded-lg border border-white/10 bg-gray-950/95 p-1 shadow-2xl backdrop-blur">
                     {SPEED_OPTIONS.map((rate) => (
@@ -429,14 +433,14 @@ export function VideoPlayer({ src }: { src: string }) {
               </div>
 
               {/* Loop */}
-              <ControlButton onClick={toggleLoop} title={loop ? "Loop on (L)" : "Loop off (L)"} active={loop}>
+              <ControlButton onClick={toggleLoop} label={loop ? "Loop on (L)" : "Loop off (L)"} active={loop}>
                 <svg className={`h-4.5 w-4.5 ${loop ? "text-emerald-300" : ""}`} fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
                   <path strokeLinecap="round" strokeLinejoin="round" d="M4 4v5h5M20 20v-5h-5M4 9a8 8 0 0114-3M20 15a8 8 0 01-14 3" />
                 </svg>
               </ControlButton>
 
               {/* Fullscreen */}
-              <ControlButton onClick={toggleFullscreen} title={fullscreen ? "Exit fullscreen (F)" : "Fullscreen (F)"}>
+              <ControlButton onClick={toggleFullscreen} label={fullscreen ? "Exit fullscreen (F)" : "Fullscreen (F)"}>
                 {fullscreen ? (
                   <svg className="h-4.5 w-4.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
                     <path strokeLinecap="round" strokeLinejoin="round" d="M9 9H4m5 0V4m6 5h5m-5 0V4M9 15H4m5 0v5m6-5h5m-5 0v5" />

src/components/WhatsNewModal.tsx

@@ -156,15 +156,16 @@ export function WhatsNewModal() {
                 </h3>
                 {entry?.date ? <p className="mt-0.5 text-xs text-gray-600">Released {entry.date}</p> : null}
               </div>
+              <Tooltip label="Close" anchorToCursor>
                 <button
                   className="rounded-md p-1.5 text-gray-500 transition-colors hover:bg-white/[0.06] hover:text-white"
                   onClick={closeWhatsNew}
-                title="Close"
                 >
                   <svg className="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                     <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
                   </svg>
                 </button>
+              </Tooltip>
             </div>
 
             <div className="min-h-0 flex-1 space-y-6 overflow-y-auto px-6 py-5">

src/components/bulk/BulkTagFields.tsx

@@ -1,4 +1,5 @@
 import { useBulkTagEditor } from "./useBulkTagEditor";
+import { Tooltip } from "../Tooltip";
 
 // Presentational tag-editing fields shared by the popover and modal surfaces.
 export function BulkTagFields({ autoFocus = false }: { autoFocus?: boolean }) {
@@ -35,14 +36,14 @@ export function BulkTagFields({ autoFocus = false }: { autoFocus?: boolean }) {
       {suggestions.length > 0 ? (
         <div className="flex flex-wrap gap-1">
           {suggestions.map((suggestion) => (
+            <Tooltip key={suggestion.tag} label={`${suggestion.count.toLocaleString()} tagged`} anchorToCursor>
               <button
-              key={suggestion.tag}
                 className="rounded-md border border-white/10 bg-white/[0.03] px-2 py-0.5 text-[11px] text-gray-400 transition-colors hover:bg-white/10 hover:text-white"
                 onClick={() => void addTag(suggestion.tag)}
-              title={`${suggestion.count.toLocaleString()} tagged`}
               >
                 {suggestion.tag}
               </button>
+            </Tooltip>
           ))}
         </div>
       ) : null}
@@ -55,15 +56,16 @@ export function BulkTagFields({ autoFocus = false }: { autoFocus?: boolean }) {
               className="group/chip flex items-center gap-1 rounded-md border border-white/10 bg-white/5 px-2 py-0.5 text-xs text-gray-300"
             >
               {tag}
+              <Tooltip label="Remove from selected" followCursor>
                 <button
                   className="text-gray-600 transition-colors hover:text-white"
-                title="Remove from selected"
                   onClick={() => void removeTag(tag)}
                 >
                   <svg className="h-3 w-3" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                     <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
                   </svg>
                 </button>
+              </Tooltip>
             </span>
           ))}
         </div>

src/components/bulk/BulkTagPopover.tsx

@@ -1,4 +1,5 @@
 import { BulkTagFields } from "./BulkTagFields";
+import { Tooltip } from "../Tooltip";
 
 // Inline popover surface for bulk tagging — the default editing surface.
 // Anchored above the bar by the parent; closes on outside click via the
@@ -12,15 +13,16 @@ export function BulkTagPopover({ onClose }: { onClose: () => void }) {
     >
       <div className="mb-2 flex items-center justify-between">
         <p className="text-[11px] uppercase tracking-wider text-gray-500">Add tags</p>
+        <Tooltip label="Close" anchorToCursor>
           <button
             className="text-gray-600 transition-colors hover:text-white"
             onClick={onClose}
-          title="Close"
           >
             <svg className="h-3.5 w-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
               <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
             </svg>
           </button>
+        </Tooltip>
       </div>
       <BulkTagFields autoFocus />
     </div>

src/dev/mockBackend.ts

@@ -9,6 +9,36 @@ let nextAlbumId = 100;
 let nextTagId = 10_000;
 
 type AnyPayload = Record<string, any> | undefined;
+type Rgb = [number, number, number];
+
+const mockPalette: Rgb[] = [
+  [59, 125, 216],
+  [31, 182, 166],
+  [76, 175, 80],
+  [242, 207, 46],
+  [232, 134, 46],
+  [226, 59, 59],
+  [139, 92, 246],
+  [236, 72, 153],
+  [139, 90, 43],
+  [26, 26, 26],
+  [245, 245, 245],
+  [154, 160, 166],
+];
+
+function isRgb(value: unknown): value is Rgb {
+  return Array.isArray(value) && value.length === 3 && value.every((entry) => typeof entry === "number");
+}
+
+function colorDistanceSq(left: Rgb, right: Rgb): number {
+  return (left[0] - right[0]) ** 2 + (left[1] - right[1]) ** 2 + (left[2] - right[2]) ** 2;
+}
+
+function matchesMockColor(image: ImageRecord, color: Rgb): boolean {
+  const primary = mockPalette[(image.id - 1) % mockPalette.length];
+  const secondary = mockPalette[(image.folder_id + image.rating) % mockPalette.length];
+  return colorDistanceSq(primary, color) <= 4_900 || colorDistanceSq(secondary, color) <= 4_900;
+}
 
 function params(payload: unknown): Record<string, any> {
   if (!payload || typeof payload !== "object") return {};
@@ -28,6 +58,7 @@ function page<T>(items: T[], offset = 0, limit = 200) {
 function filterImages(input: ImageRecord[], payload: unknown): ImageRecord[] {
   const p = params(payload);
   const query = String(p.search ?? p.query ?? "").trim().toLowerCase();
+  const color = isRgb(p.color) ? p.color : null;
   return input.filter((image) => {
     if (p.folder_id !== undefined && p.folder_id !== null && image.folder_id !== p.folder_id) return false;
     if (p.media_kind && image.media_kind !== p.media_kind) return false;
@@ -36,6 +67,7 @@ function filterImages(input: ImageRecord[], payload: unknown): ImageRecord[] {
     if (p.embedding_failed_only && image.embedding_status !== "failed") return false;
     if (p.tagging_failed_only && !image.ai_tagger_error) return false;
     if (query && !image.filename.toLowerCase().includes(query)) return false;
+    if (color && !matchesMockColor(image, color)) return false;
     return true;
   });
 }

src/store.ts

@@ -1161,6 +1161,7 @@ export const useGalleryStore = create<GalleryState>((set, get) => ({
             media_kind: mediaFilter === "all" ? null : mediaFilter,
             favorites_only: favoritesOnly,
             rating_min: minimumRating > 0 ? minimumRating : null,
+            color: colorFilter,
             limit: PAGE_SIZE,
             offset,
           },