Add Hover Tooltip Component for Field Descriptions

[drumondpucminas]

Description

Implement a reusable hover-only tooltip (with touch/click fallback) and add info icons next to feedback field labels (including ResourceForm). Tooltips should appear on hover and follow the project color theme.

Tooltip Color Variables

• --tooltip-bg: #1f2937 (bg-gray-800)
• --tooltip-text: #f3f4f6 (text-gray-100)
• --tooltip-border: #374151 (border-gray-700)
• --icon-default: #9ca3af (text-gray-400)
• --icon-hover: #818cf8 (indigo-400)

✅ Acceptance Criteria

Core Functionality

• Tooltip component is created in src/shared/Tooltip.jsx and exported from src/shared/index.js
• Info icon appears next to all field labels in the feedback form
• Tooltip content appears on hover over the info icon
• Tooltip disappears when mouse leaves the icon
• Tooltip positioning adjusts based on viewport (doesn't overflow screen edges)
• Tooltip has smooth fade-in/fade-out animation (200-300ms transition)

Content Configuration

• Tooltip descriptions are defined in src/components/feedback/config/tooltipContent.js
• All feedback form fields have tooltip descriptions:
  • Report Title - "Define o título que aparecerá no topo do relatório de feedback gerado"
  • Show Score toggle - "Quando ativado, exibe a pontuação numérica (0-100) no feedback final"
  • Show Passed Tests toggle - "Exibe quais testes foram aprovados no relatório de feedback"
  • Add Report Summary toggle - "Inclui um resumo geral do desempenho no início do relatório"
  • Feedback Tone (AI mode) - "Determina o tom utilizado pela IA ao gerar o feedback (encorajador, neutro, direto)"
  • Feedback Persona (AI mode) - "Define a personalidade da IA ao fornecer feedback (ex: professor experiente, mentor amigável)"
  • Activity Context (AI mode) - "Contexto sobre a atividade avaliada para melhorar a relevância do feedback gerado"
  • Extra Guidelines (AI mode) - "Instruções adicionais para guiar a IA na geração de feedback personalizado"
  • Solution Type (AI mode) - "Define se o feedback deve incluir dicas, soluções completas, ou apenas avaliação"
  • Reading Files section - "Arquivos que serão lidos e incluídos no contexto do feedback"
  • Resources section - "Materiais de apoio vinculados a testes específicos para ajudar o aluno"

Responsive Behavior

• Tooltip works on mobile devices (shows on tap/touch, hides on second tap or tap outside)
• Tooltip doesn't overflow viewport on small screens

Integration Points

• Tooltips integrated into src/components/feedback/index.jsx:
  • Next to "Configurações da IA" heading (AI mode only)
  • Next to "Tom do Feedback" label (AI mode only)
  • Next to "Persona do Feedback" label (AI mode only)
  • Next to "Contexto da Atividade" label (AI mode only)
  • Next to "Orientações Extras" label (AI mode only)
  • Next to "Fornecimento de Soluções" label (AI mode only)
  • Next to "Arquivos de Leitura" heading
  • Next to "Adicionar Conteúdo Online de Apoio" heading

[drumondpucminas]

@Silas-Hoffmann for the icon you can use this one. Just remember to change the color to match the description requested. You can add it under src/assets. For the design, up to you. Nothing too big, nothing too small