From 62610020398d5e97a33248869e3d15adcca2bca0 Mon Sep 17 00:00:00 2001
From: Dom <dom@rpa-vision-v3.local>
Date: Wed, 29 Apr 2026 17:42:55 +0200
Subject: [PATCH] ux(vwb): tooltip enrichi sur les outils de la palette
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Le tooltip natif HTML montrait juste le label ('Clic'). Maintenant il affiche :
- Le label
- La description complète (existait déjà dans types.ts mais non exposée)
- L'indication 'ancre requise' si applicable
- La liste des paramètres configurables

Le badge 🎯 a aussi son propre tooltip explicatif.

Aide à la prise en main du VWB pour la construction de workflows démo
(retour terrain Dom : 'il y a des outils dont je ne sais pas à quoi ils servent').

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 .../frontend_v4/src/components/ToolPalette.tsx                | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/visual_workflow_builder/frontend_v4/src/components/ToolPalette.tsx b/visual_workflow_builder/frontend_v4/src/components/ToolPalette.tsx
index 79532cbb1..c4622e6c1 100644
--- a/visual_workflow_builder/frontend_v4/src/components/ToolPalette.tsx
+++ b/visual_workflow_builder/frontend_v4/src/components/ToolPalette.tsx
@@ -54,11 +54,11 @@ export default function ToolPalette() {
                       className="tool-item"
                       draggable
                       onDragStart={(e) => onDragStart(e, action.type)}
-                      title={action.label}
+                      title={`${action.label}\n\n${action.description}${action.needsAnchor ? '\n\n🎯 Nécessite une ancre visuelle' : ''}${action.params.length > 0 ? '\n\nParamètres : ' + action.params.map(p => p.name).join(', ') : ''}`}
                     >
                       <span className="tool-icon">{action.icon}</span>
                       <span className="tool-label">{action.label}</span>
-                      {action.needsAnchor && <span className="tool-anchor-badge">🎯</span>}
+                      {action.needsAnchor && <span className="tool-anchor-badge" title="Nécessite de viser un élément à l'écran">🎯</span>}
                     </div>
                   ))}
                 </div>