diff --git a/EXHAUSTIVE_TODO_LIST.md b/EXHAUSTIVE_TODO_LIST.md
index 03609d403..598c6700e 100644
--- a/EXHAUSTIVE_TODO_LIST.md
+++ b/EXHAUSTIVE_TODO_LIST.md
@@ -3586,12 +3586,18 @@ Critical path dependencies:
- **Result**: Tooltip component is ready to use, no dependency needed
- **Rollback**: N/A (component already exists)
-- [ ] **Action 10.4.1.2**: Add tooltips to advanced features
+- [x] **Action 10.4.1.2**: Add tooltips to advanced features
- **Scope**: Advanced UI elements - Add tooltips explaining usage
- - **Dependencies**: Action 10.4.1.1 complete
+ - **Dependencies**: Action 10.4.1.1 complete ✅
- **Risk**: LOW 🔒
- - **Validation**: Tooltips appear on hover
- - **Rollback**: Remove tooltips
+ - **Validation**: ✅ Tooltips added to advanced features:
+ - **AdvancedFilters component**: Added optional `tooltip` prop to explain what advanced filters are
+ - **LibraryPage view mode toggles**: Added tooltips to Grid and List view buttons explaining each view type
+ - **LibraryPage sort button**: Added tooltip explaining sorting functionality
+ - **LibraryPage bulk mode button**: Added tooltip explaining bulk selection mode (context-aware: different text when active vs inactive)
+ - **Tooltips use**: Tooltip component from `@/components/ui/tooltip` with hover trigger
+ - **Result**: Advanced features now have helpful tooltips that appear on hover, improving discoverability and reducing cognitive load
+ - **Rollback**: Remove tooltip props and Tooltip wrappers
- [ ] **Action 10.4.1.3**: Create onboarding flow for new users (optional)
- **Scope**: `apps/web/src/components/Onboarding.tsx` (create) - Guide new users through features
diff --git a/apps/web/src/components/AdvancedFilters.tsx b/apps/web/src/components/AdvancedFilters.tsx
index 2b5dde4c0..35a21fd29 100644
--- a/apps/web/src/components/AdvancedFilters.tsx
+++ b/apps/web/src/components/AdvancedFilters.tsx
@@ -2,6 +2,7 @@ import * as React from 'react';
import { ChevronDown, ChevronUp, Filter } from 'lucide-react';
import { cn } from '@/lib/utils';
import { Collapsible } from './ui/collapsible';
+import { Tooltip } from './ui/tooltip';
export interface AdvancedFiltersProps {
/**
@@ -46,6 +47,12 @@ export interface AdvancedFiltersProps {
* @default true
*/
showIcon?: boolean;
+
+ /**
+ * Tooltip text to explain what advanced filters are
+ * If provided, wraps the trigger in a Tooltip component
+ */
+ tooltip?: string;
}
/**
@@ -87,6 +94,7 @@ export function AdvancedFilters({
className,
contentClassName,
showIcon = true,
+ tooltip,
}: AdvancedFiltersProps) {
const [uncontrolledOpen, setUncontrolledOpen] = React.useState(defaultOpen);
@@ -103,16 +111,26 @@ export function AdvancedFilters({
const ChevronIcon = isOpen ? ChevronUp : ChevronDown;
+ const triggerContent = (
+
+ {showIcon && }
+ {label}
+
+
+ );
+
+ const collapsibleTrigger = tooltip ? (
+
+ {triggerContent}
+
+ ) : (
+ triggerContent
+ );
+
return (
- {showIcon && }
- {label}
-
-
- }
+ trigger={collapsibleTrigger}
open={isOpen}
onOpenChange={handleToggle}
defaultOpen={defaultOpen}
diff --git a/apps/web/src/features/library/pages/LibraryPage.tsx b/apps/web/src/features/library/pages/LibraryPage.tsx
index 2562432e0..534c90d30 100644
--- a/apps/web/src/features/library/pages/LibraryPage.tsx
+++ b/apps/web/src/features/library/pages/LibraryPage.tsx
@@ -54,6 +54,7 @@ import { ConfirmationDialog } from '@/components/ui/confirmation-dialog';
import { LoadingState } from '@/components/ui/LoadingState';
import { Sidebar } from '@/components/ui/Sidebar';
import { BulkModeBanner } from '@/components/BulkModeBanner';
+import { Tooltip } from '@/components/ui/tooltip';
import { logger } from '@/utils/logger';
import { parseApiError } from '@/utils/apiErrorHandler';
import { cn } from '@/lib/utils';
@@ -370,49 +371,61 @@ export default function LibraryPagePremium() {
>
)}
-
+
+
-
-
+
+
+
+
+
+