refactor: enhance Tooltip integration across components

- Replaced existing title attributes with Tooltip components for better accessibility and user experience in various components including FilterPopover, LibraryToolbar, and ProfileListItem.
- Updated Tooltip export in Tooltip.tsx to TooltipPrimitives for clarity on usage.
- Renamed SimpleTooltipProps to TooltipProps for consistency in naming conventions.
- Improved overall code readability and maintainability by standardizing tooltip usage.

Author: Crauzer

src/components/Tooltip.tsx

@@ -125,8 +125,8 @@ export const TooltipArrow = forwardRef<HTMLDivElement, TooltipArrowProps>(
 );
 TooltipArrow.displayName = "Tooltip.Arrow";
 
-// Compound export
-export const Tooltip = {
+// Compound export (primitives for advanced/custom tooltip layouts)
+export const TooltipPrimitives = {
   Provider: TooltipProvider,
   Root: TooltipRoot,
   Trigger: TooltipTrigger,
@@ -136,8 +136,7 @@ export const Tooltip = {
   Arrow: TooltipArrow,
 };
 
-// Simplified Tooltip component for common use cases
-export interface SimpleTooltipProps {
+export interface TooltipProps {
   content: ReactNode;
   children: ReactNode;
   side?: "top" | "right" | "bottom" | "left";
@@ -146,14 +145,14 @@ export interface SimpleTooltipProps {
   showArrow?: boolean;
 }
 
-export function SimpleTooltip({
+export function Tooltip({
   content,
   children,
   side = "top",
   align = "center",
   sideOffset = 8,
   showArrow = true,
-}: SimpleTooltipProps) {
+}: TooltipProps) {
   return (
     <BaseTooltip.Root>
       <BaseTooltip.Trigger className="inline-flex">{children}</BaseTooltip.Trigger>

src/modules/library/components/FilterPopover.tsx

@@ -1,6 +1,6 @@
 import { LuFilter, LuX } from "react-icons/lu";
 
-import { Checkbox, IconButton, Popover } from "@/components";
+import { Checkbox, IconButton, Popover, Tooltip } from "@/components";
 import type { FilterOptions } from "@/modules/library/api";
 import { getMapLabel, getTagLabel } from "@/modules/library/utils/labels";
 import { useHasActiveFilters, useLibraryFilterStore } from "@/stores";
@@ -30,23 +30,24 @@ export function FilterPopover({ filterOptions }: FilterPopoverProps) {
 
   return (
     <Popover.Root>
-      <Popover.Trigger
-        render={
-          <IconButton
-            icon={
-              <div className="relative">
-                <LuFilter className="h-4 w-4" />
-                {hasActive && (
-                  <span className="absolute -top-1 -right-1 h-2 w-2 rounded-full bg-brand-500" />
-                )}
-              </div>
-            }
-            variant="ghost"
-            size="sm"
-            title="Filter mods"
-          />
-        }
-      />
+      <Tooltip content="Filter mods">
+        <Popover.Trigger
+          render={
+            <IconButton
+              icon={
+                <div className="relative">
+                  <LuFilter className="h-4 w-4" />
+                  {hasActive && (
+                    <span className="absolute -top-1 -right-1 h-2 w-2 rounded-full bg-brand-500" />
+                  )}
+                </div>
+              }
+              variant="ghost"
+              size="sm"
+            />
+          }
+        />
+      </Tooltip>
       <Popover.Portal>
         <Popover.Positioner side="bottom" align="start" sideOffset={8}>
           <Popover.Popup className="w-64 p-3">

src/modules/library/components/LibraryToolbar.tsx

@@ -1,6 +1,6 @@
 import { LuFolderOpen, LuGrid3X3, LuList, LuPlus, LuSearch } from "react-icons/lu";
 
-import { Button, IconButton } from "@/components";
+import { Button, IconButton, Tooltip } from "@/components";
 import type { PatcherStatus } from "@/lib/tauri";
 import type { useLibraryActions } from "@/modules/library/api";
 import { useLibraryViewMode } from "@/modules/library/api";
@@ -44,13 +44,14 @@ export function LibraryToolbar({
     >
       <ProfileSelector />
 
-      <IconButton
-        icon={<LuFolderOpen className="h-4 w-4" />}
-        variant="ghost"
-        size="sm"
-        onClick={actions.handleOpenStorageDirectory}
-        title="Open storage directory"
-      />
+      <Tooltip content="Open storage directory">
+        <IconButton
+          icon={<LuFolderOpen className="h-4 w-4" />}
+          variant="ghost"
+          size="sm"
+          onClick={actions.handleOpenStorageDirectory}
+        />
+      </Tooltip>
 
       {/* Search */}
       <div className="relative flex-1">
@@ -68,18 +69,22 @@ export function LibraryToolbar({
 
       {/* View toggle */}
       <div className="flex items-center gap-1">
-        <IconButton
-          icon={<LuGrid3X3 className="h-4 w-4" />}
-          variant={viewMode === "grid" ? "default" : "ghost"}
-          size="sm"
-          onClick={() => setViewMode("grid")}
-        />
-        <IconButton
-          icon={<LuList className="h-4 w-4" />}
-          variant={viewMode === "list" ? "default" : "ghost"}
-          size="sm"
-          onClick={() => setViewMode("list")}
-        />
+        <Tooltip content="Grid view">
+          <IconButton
+            icon={<LuGrid3X3 className="h-4 w-4" />}
+            variant={viewMode === "grid" ? "default" : "ghost"}
+            size="sm"
+            onClick={() => setViewMode("grid")}
+          />
+        </Tooltip>
+        <Tooltip content="List view">
+          <IconButton
+            icon={<LuList className="h-4 w-4" />}
+            variant={viewMode === "list" ? "default" : "ghost"}
+            size="sm"
+            onClick={() => setViewMode("list")}
+          />
+        </Tooltip>
       </div>
 
       {/* Actions */}

src/modules/library/components/ProfileSelector/ProfileListItem.tsx

@@ -1,7 +1,7 @@
 import { useEffect, useRef, useState } from "react";
 import { LuCheck, LuPencil, LuTrash2, LuX } from "react-icons/lu";
 
-import { Button, Field, IconButton, useToast } from "@/components";
+import { Button, Field, IconButton, Tooltip, useToast } from "@/components";
 import type { Profile } from "@/lib/tauri";
 import { useRenameProfile } from "@/modules/library/api";
 
@@ -115,22 +115,24 @@ export function ProfileListItem({
 
       {!isDefaultProfile && (
         <>
-          <IconButton
-            icon={<LuPencil className="h-3.5 w-3.5" />}
-            variant="ghost"
-            size="xs"
-            onClick={startEditing}
-            title="Rename profile"
-          />
-          <IconButton
-            icon={<LuTrash2 className="h-3.5 w-3.5" />}
-            variant="ghost"
-            size="xs"
-            onClick={() => onDeleteClick(profile)}
-            disabled={isActive}
-            className="hover:text-red-400"
-            title="Delete profile"
-          />
+          <Tooltip content="Rename profile">
+            <IconButton
+              icon={<LuPencil className="h-3.5 w-3.5" />}
+              variant="ghost"
+              size="xs"
+              onClick={startEditing}
+            />
+          </Tooltip>
+          <Tooltip content="Delete profile">
+            <IconButton
+              icon={<LuTrash2 className="h-3.5 w-3.5" />}
+              variant="ghost"
+              size="xs"
+              onClick={() => onDeleteClick(profile)}
+              disabled={isActive}
+              className="hover:text-red-400"
+            />
+          </Tooltip>
         </>
       )}
     </div>

src/modules/settings/components/AppearanceSection/BackdropImagePicker.tsx

@@ -1,7 +1,7 @@
 import { open } from "@tauri-apps/plugin-dialog";
 import { LuImage, LuX } from "react-icons/lu";
 
-import { Field, IconButton } from "@/components";
+import { Field, IconButton, Tooltip } from "@/components";
 import type { Settings } from "@/lib/tauri";
 
 import { useDebouncedSlider } from "./useDebouncedSlider";
@@ -46,19 +46,23 @@ export function BackdropImagePicker({ settings, onSave }: BackdropImagePickerPro
           placeholder="No image selected"
           className="flex-1"
         />
-        <IconButton
-          icon={<LuImage className="h-5 w-5" />}
-          variant="outline"
-          size="lg"
-          onClick={handleBrowse}
-        />
-        {settings.backdropImage && (
+        <Tooltip content="Browse image">
           <IconButton
-            icon={<LuX className="h-5 w-5" />}
+            icon={<LuImage className="h-5 w-5" />}
             variant="outline"
             size="lg"
-            onClick={handleClear}
+            onClick={handleBrowse}
           />
+        </Tooltip>
+        {settings.backdropImage && (
+          <Tooltip content="Clear image">
+            <IconButton
+              icon={<LuX className="h-5 w-5" />}
+              variant="outline"
+              size="lg"
+              onClick={handleClear}
+            />
+          </Tooltip>
         )}
       </div>
       <p className="text-sm text-surface-500">

src/modules/settings/components/LeaguePathSection.tsx

@@ -2,7 +2,7 @@ import { open } from "@tauri-apps/plugin-dialog";
 import { useEffect, useState } from "react";
 import { LuCircleAlert, LuCircleCheck, LuFolderOpen, LuLoader } from "react-icons/lu";
 
-import { Button, Field, IconButton, SectionCard } from "@/components";
+import { Button, Field, IconButton, SectionCard, Tooltip } from "@/components";
 import { api, type Settings } from "@/lib/tauri";
 import { unwrapForQuery } from "@/utils/query";
 
@@ -81,12 +81,14 @@ export function LeaguePathSection({ settings, onSave }: SettingsSectionProps) {
               </div>
             )}
           </div>
-          <IconButton
-            icon={<LuFolderOpen className="h-5 w-5" />}
-            variant="outline"
-            size="lg"
-            onClick={handleBrowse}
-          />
+          <Tooltip content="Browse">
+            <IconButton
+              icon={<LuFolderOpen className="h-5 w-5" />}
+              variant="outline"
+              size="lg"
+              onClick={handleBrowse}
+            />
+          </Tooltip>
         </div>
         <Button
           variant="transparent"

src/modules/settings/components/ModStorageSection.tsx

@@ -1,7 +1,7 @@
 import { open } from "@tauri-apps/plugin-dialog";
 import { LuFolderOpen } from "react-icons/lu";
 
-import { Field, IconButton, SectionCard } from "@/components";
+import { Field, IconButton, SectionCard, Tooltip } from "@/components";
 import type { Settings } from "@/lib/tauri";
 
 interface ModStorageSectionProps {
@@ -37,12 +37,14 @@ export function ModStorageSection({ settings, onSave }: ModStorageSectionProps)
             placeholder="Default (app data directory)"
             className="flex-1"
           />
-          <IconButton
-            icon={<LuFolderOpen className="h-5 w-5" />}
-            variant="outline"
-            size="lg"
-            onClick={handleBrowse}
-          />
+          <Tooltip content="Browse">
+            <IconButton
+              icon={<LuFolderOpen className="h-5 w-5" />}
+              variant="outline"
+              size="lg"
+              onClick={handleBrowse}
+            />
+          </Tooltip>
         </div>
         <p className="text-sm text-surface-400">
           Choose where your installed mods will be stored. Leave empty to use the default location.

src/modules/settings/components/WorkshopSection.tsx

@@ -1,7 +1,7 @@
 import { open } from "@tauri-apps/plugin-dialog";
 import { LuFolderOpen } from "react-icons/lu";
 
-import { Field, IconButton, SectionCard } from "@/components";
+import { Field, IconButton, SectionCard, Tooltip } from "@/components";
 import type { Settings } from "@/lib/tauri";
 
 interface WorkshopSectionProps {
@@ -37,12 +37,14 @@ export function WorkshopSection({ settings, onSave }: WorkshopSectionProps) {
             placeholder="Not configured"
             className="flex-1"
           />
-          <IconButton
-            icon={<LuFolderOpen className="h-5 w-5" />}
-            variant="outline"
-            size="lg"
-            onClick={handleBrowse}
-          />
+          <Tooltip content="Browse">
+            <IconButton
+              icon={<LuFolderOpen className="h-5 w-5" />}
+              variant="outline"
+              size="lg"
+              onClick={handleBrowse}
+            />
+          </Tooltip>
         </div>
         <p className="text-sm text-surface-400">
           Choose where your mod projects will be stored for the Creator Workshop. This directory

src/modules/shell/components/DevConsole.tsx

@@ -2,7 +2,7 @@ import { useEffect, useRef } from "react";
 import { LuTerminal, LuTrash2, LuX } from "react-icons/lu";
 import { twMerge } from "tailwind-merge";
 
-import { IconButton } from "@/components";
+import { IconButton, Tooltip } from "@/components";
 import { isLevelVisible, type LogEntry, useDevConsoleStore } from "@/stores/devConsole";
 
 const levelColors: Record<string, string> = {
@@ -105,22 +105,26 @@ export function DevConsole() {
 
         <span className="ml-auto text-xs text-surface-500">{filteredEntries.length} entries</span>
 
-        <IconButton
-          icon={<LuTrash2 className="h-3.5 w-3.5" />}
-          variant="ghost"
-          size="xs"
-          onClick={clear}
-          aria-label="Clear console"
-          className="text-surface-400 hover:text-surface-200"
-        />
-        <IconButton
-          icon={<LuX className="h-3.5 w-3.5" />}
-          variant="ghost"
-          size="xs"
-          onClick={toggle}
-          aria-label="Close console"
-          className="text-surface-400 hover:text-surface-200"
-        />
+        <Tooltip content="Clear console">
+          <IconButton
+            icon={<LuTrash2 className="h-3.5 w-3.5" />}
+            variant="ghost"
+            size="xs"
+            onClick={clear}
+            aria-label="Clear console"
+            className="text-surface-400 hover:text-surface-200"
+          />
+        </Tooltip>
+        <Tooltip content="Close console">
+          <IconButton
+            icon={<LuX className="h-3.5 w-3.5" />}
+            variant="ghost"
+            size="xs"
+            onClick={toggle}
+            aria-label="Close console"
+            className="text-surface-400 hover:text-surface-200"
+          />
+        </Tooltip>
       </div>
 
       {/* Log entries */}