christianV/Craze-Data-check
1
0
Fork 0
mirror of https://github.com/christianvidalwolf-prog/Craze-Data-check.git synced 2026-08-03 13:55:23 +02:00
Code Issues Packages Projects Releases Wiki Activity

Add tooltip preview on hover for notes in Pricing tab

Browse Source 
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
1 changed files with 18 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/PricingView.tsx
+18 -12
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 {
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>