From 03b98c9aed777d6d6f1b28dd7f812b8331159399 Mon Sep 17 00:00:00 2001
From: Christian Vidal Wolf <christianvidalwolf@gmail.com>
Date: Mon, 20 Apr 2026 20:35:46 +0200
Subject: [PATCH] Add tooltip preview on hover for notes in Pricing tab

Show note content in popup when hovering over the notes icon
---
 src/components/PricingView.tsx | 30 ++++++++++++++++++------------
 1 file changed, 18 insertions(+), 12 deletions(-)

diff --git a/src/components/PricingView.tsx b/src/components/PricingView.tsx
index f1f6d01..6a7ca02 100644
--- a/src/components/PricingView.tsx
+++ b/src/components/PricingView.tsx
@@ -1,4 +1,4 @@
-import React, { useState, useMemo, useRef, useCallback } from 'react';
+import React, { useState, useMemo, useRef, useCallback, useEffect } from 'react';
 import { ExcelRow, COLUMNS } from '../types';
 import {
   AlertTriangle,
@@ -925,18 +925,24 @@ export function PricingView({ data, headers, onSaveRow, onCaptureState, onEdit,
                           onChange={(e) => handleToggleCheck(dataIndex, e.target.checked)}
                           className="w-4 h-4 rounded border-slate-600 bg-slate-900 text-blue-600 focus:ring-blue-500 focus:ring-offset-slate-800 cursor-pointer"
                         />
-                        <button
-                          onClick={() => setNoteEditor({ rowIndex: dataIndex, text: note })}
-                          className={cn(
-                            "p-1.5 rounded-md transition-all shrink-0",
-                            note 
-                              ? "bg-amber-500/10 text-amber-400 border border-amber-500/20 hover:bg-amber-500/20" 
-                              : "text-slate-500 hover:text-slate-300 hover:bg-slate-700/50"
+                        <div className="relative group">
+                          <button
+                            onClick={() => setNoteEditor({ rowIndex: dataIndex, text: note })}
+                            className={cn(
+                              "p-1.5 rounded-md transition-all shrink-0",
+                              note 
+                                ? "bg-amber-500/10 text-amber-400 border border-amber-500/20 hover:bg-amber-500/20" 
+                                : "text-slate-500 hover:text-slate-300 hover:bg-slate-700/50"
+                            )}
+                          >
+                            <MessageSquare className={cn("w-3.5 h-3.5", note && "fill-amber-400/20")} />
+                          </button>
+                          {note && (
+                            <div className="absolute bottom-full left-1/2 -translate-x-1/2 mb-2 w-48 p-2 bg-amber-900/90 border border-amber-500/50 rounded text-xs text-white shadow-lg z-50 opacity-0 group-hover:opacity-100 transition-opacity pointer-events-none">
+                              {note}
+                            </div>
                           )}
-                          title={note || "Add note"}
-                        >
-                          <MessageSquare className={cn("w-3.5 h-3.5", note && "fill-amber-400/20")} />
-                        </button>
+                        </div>
                       </div>
                     </td>