Add tooltip preview on hover for notes in Pricing tab

Show note content in popup when hovering over the notes icon
This commit is contained in:
Christian Vidal Wolf
2026-04-20 20:35:46 +02:00
parent 9878efb2ca
commit 03b98c9aed
+8 -2
View File
@@ -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 { ExcelRow, COLUMNS } from '../types';
import { import {
AlertTriangle, AlertTriangle,
@@ -925,6 +925,7 @@ export function PricingView({ data, headers, onSaveRow, onCaptureState, onEdit,
onChange={(e) => handleToggleCheck(dataIndex, e.target.checked)} 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" 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"
/> />
<div className="relative group">
<button <button
onClick={() => setNoteEditor({ rowIndex: dataIndex, text: note })} onClick={() => setNoteEditor({ rowIndex: dataIndex, text: note })}
className={cn( className={cn(
@@ -933,10 +934,15 @@ export function PricingView({ data, headers, onSaveRow, onCaptureState, onEdit,
? "bg-amber-500/10 text-amber-400 border border-amber-500/20 hover:bg-amber-500/20" ? "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" : "text-slate-500 hover:text-slate-300 hover:bg-slate-700/50"
)} )}
title={note || "Add note"}
> >
<MessageSquare className={cn("w-3.5 h-3.5", note && "fill-amber-400/20")} /> <MessageSquare className={cn("w-3.5 h-3.5", note && "fill-amber-400/20")} />
</button> </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>
)}
</div>
</div> </div>
</td> </td>