From 8ee4cf95a878594ad92d623a0a4df0b1c778cd7a Mon Sep 17 00:00:00 2001
From: Silas <silasrviana@gmail.com>
Date: Wed, 28 Jan 2026 22:18:32 -0300
Subject: [PATCH 1/2] feat: add configurable tooltips

---
 .flowbite-react/pid                           |   2 +-
 .../feedback/components/ReportTitleInput.tsx  |   4 +-
 .../feedback/components/ToggleSwitch.tsx      |   4 +-
 .../feedback/config/TooltipContent.ts         |  19 ++
 src/components/feedback/index.tsx             | 295 +++++++++++-------
 src/shared/Tooltip.tsx                        |  61 ++++
 src/shared/index.ts                           |   1 +
 7 files changed, 260 insertions(+), 126 deletions(-)
 create mode 100644 src/components/feedback/config/TooltipContent.ts
 create mode 100644 src/shared/Tooltip.tsx

diff --git a/.flowbite-react/pid b/.flowbite-react/pid
index f75f5ed..fa606e0 100644
--- a/.flowbite-react/pid
+++ b/.flowbite-react/pid
@@ -1 +1 @@
-3518
\ No newline at end of file
+21636
\ No newline at end of file
diff --git a/src/components/feedback/components/ReportTitleInput.tsx b/src/components/feedback/components/ReportTitleInput.tsx
index f9656e8..ab1522f 100644
--- a/src/components/feedback/components/ReportTitleInput.tsx
+++ b/src/components/feedback/components/ReportTitleInput.tsx
@@ -1,9 +1,9 @@
-import React, { ChangeEvent } from 'react';
+import React, { ChangeEvent, ReactNode } from 'react';
 
 interface ReportTitleInputProps {
   title: string;
   onChange: (value: string) => void;
-  label?: string;
+  label?: ReactNode;
   placeholder?: string;
 }
 
diff --git a/src/components/feedback/components/ToggleSwitch.tsx b/src/components/feedback/components/ToggleSwitch.tsx
index 6944dc8..0303acd 100644
--- a/src/components/feedback/components/ToggleSwitch.tsx
+++ b/src/components/feedback/components/ToggleSwitch.tsx
@@ -1,8 +1,8 @@
-import React, { ChangeEvent } from 'react';
+import React, { ChangeEvent, ReactNode } from 'react';
 
 interface ToggleSwitchProps {
   id: string;
-  label: string;
+  label: ReactNode;
   isChecked: boolean;
   onChange: (e: ChangeEvent<HTMLInputElement>) => void;
 }
diff --git a/src/components/feedback/config/TooltipContent.ts b/src/components/feedback/config/TooltipContent.ts
new file mode 100644
index 0000000..36e93ac
--- /dev/null
+++ b/src/components/feedback/config/TooltipContent.ts
@@ -0,0 +1,19 @@
+export const TOOLTIP_CONTENT = {
+  header: {},
+  geral: {
+    Titulo_do_relatorio: "Define o título que aparecerá no topo do relatório de feedback gerado",
+    Exibir_pontuacao: "Quando ativado, exibe a pontuação numérica (0-100) no feedback final",
+    Exibir_testes_aprovados: "Exibe quais testes foram aprovados no relatório de feedback",
+    Adicionar_resumo: "Inclui um resumo geral do desempenho no início do relatório",
+    Adicionar_conteudo_online_de_apoio: "Materiais de apoio vinculados a testes específicos para ajudar o aluno"
+  },
+  ai: {
+    inteligencia_artificial: "Defina como a Inteligência Artificial deve se comportar ao avaliar o aluno",
+    Fornecimento_de_solucoes: "Define se o feedback deve incluir dicas, soluções completas, ou apenas avaliação",
+    Tom_do_feedback: "Determina o tom utilizado pela IA ao gerar o feedback (encorajador, neutro, direto)",
+    Persona_do_feedback: "Define a personalidade da IA ao fornecer feedback (ex: professor experiente, mentor amigável)",
+    Contexto_da_atividade: "Contexto sobre a atividade avaliada para melhorar a relevância do feedback gerado",
+    Orientacoes_extras: "Instruções adicionais para guiar a IA na geração de feedback personalizado",
+    Arquivos_para_leitura: "Arquivos que serão lidos e incluídos no contexto do feedback"
+  }
+};
\ No newline at end of file
diff --git a/src/components/feedback/index.tsx b/src/components/feedback/index.tsx
index c8a943a..de6b714 100644
--- a/src/components/feedback/index.tsx
+++ b/src/components/feedback/index.tsx
@@ -3,9 +3,10 @@ import ReportTitleInput from './components/ReportTitleInput';
 import ToggleSwitch from './components/ToggleSwitch';
 import ResourceForm from './components/ResourceForm';
 import ResourceList from './components/ResourceList';
-import { SaveButton } from '../../shared';
+import { SaveButton, Tooltip } from '../../shared';
 import { useSaveState, useArrayState, useFormInput } from '../../hooks';
 import useFeedbackForm, { FeedbackConfig, OnlineResource } from './hooks/useFeedbackForm';
+import { TOOLTIP_CONTENT } from './config/TooltipContent';
 
 type FeedbackMode = 'ai' | 'static' | 'default';
 
@@ -17,12 +18,12 @@ interface FeedbackFormProps {
 const FeedbackForm: React.FC<FeedbackFormProps> = ({ onSave, feedbackMode = 'ai' }) => {
   // Custom hook for feedback form state and logic
   const feedbackForm = useFeedbackForm(feedbackMode);
-  
+
   // Array states for resources and reading files
   const readingFilesState = useArrayState<string>([]);
   const currentFileInput = useFormInput("");
   const resourcesState = useArrayState<OnlineResource>([]);
-  
+
   // Save state hook
   const { isSaved, showSuccess: showSaveSuccess, showAnimation: saveButtonAnimation, triggerSave, cancelSave } = useSaveState();
 
@@ -66,45 +67,70 @@ const FeedbackForm: React.FC<FeedbackFormProps> = ({ onSave, feedbackMode = 'ai'
             <h2 className="text-2xl font-bold border-b-2 border-gray-700 pb-3 mb-6 text-indigo-400">
               Geral
             </h2>
-            
+
             <div className="space-y-6">
-              <ReportTitleInput 
+              <ReportTitleInput
                 title={feedbackForm.reportTitle}
                 onChange={feedbackForm.setReportTitle}
+                label={
+                  <span className="flex items-center gap-2">
+                    Título do Relatório
+                    <Tooltip content={TOOLTIP_CONTENT.geral.Titulo_do_relatorio} />
+                  </span>
+                }
               />
 
-              {/* Configurações Booleanas (Toggles) */}
+              {/* Configurações Booleanas */}
               <div className="grid grid-cols-1 md:grid-cols-3 gap-4 pt-2">
-                <ToggleSwitch 
-                  id="show_score" 
-                  label="Exibir Pontuação" 
+                <ToggleSwitch
+                  id="show_score"
                   isChecked={feedbackForm.toggleStates.show_score}
                   onChange={() => feedbackForm.handleToggle('show_score')}
+                  label={
+                    <span className="flex items-center gap-2">
+                      Exibir Pontuação
+                      <Tooltip content={TOOLTIP_CONTENT.geral.Exibir_pontuacao} />
+                    </span>
+                  }
                 />
-                <ToggleSwitch 
-                  id="show_passed_tests" 
-                  label="Exibir Testes Aprovados" 
+                <ToggleSwitch
+                  id="show_passed_tests"
                   isChecked={feedbackForm.toggleStates.show_passed_tests}
                   onChange={() => feedbackForm.handleToggle('show_passed_tests')}
+                  label={
+                    <span className="flex items-center gap-2">
+                      Exibir Testes Aprovados
+                      <Tooltip content={TOOLTIP_CONTENT.geral.Exibir_testes_aprovados} />
+                    </span>
+                  }
                 />
-                <ToggleSwitch 
-                  id="add_report_summary" 
-                  label="Adicionar Resumo" 
+                <ToggleSwitch
+                  id="add_report_summary"
                   isChecked={feedbackForm.toggleStates.add_report_summary}
                   onChange={() => feedbackForm.handleToggle('add_report_summary')}
+                  label={
+                    <span className="flex items-center gap-2">
+                      Adicionar Resumo
+                      <Tooltip content={TOOLTIP_CONTENT.geral.Adicionar_resumo} />
+                    </span>
+                  }
                 />
+
               </div>
 
               {/* Conteúdo Online */}
               <div className="pt-4 space-y-6">
                 <div>
-                  <p className="text-gray-400 font-medium mb-3 text-sm">
-                    Adicionar Conteúdo Online de Apoio
-                  </p>
+                  <div className="flex items-center gap-2 mb-3 text-sm">
+                    <p className="text-gray-400 font-medium">
+                      Adicionar Conteúdo Online de Apoio
+                    </p>
+                    <Tooltip content={TOOLTIP_CONTENT.geral.Adicionar_conteudo_online_de_apoio} />
+                  </div>
                   <ResourceForm onSubmit={handleAddResource} />
                 </div>
 
-                <ResourceList 
+                <ResourceList
                   resources={resourcesState.items}
                   onDeleteResource={handleDeleteResource}
                 />
@@ -117,125 +143,152 @@ const FeedbackForm: React.FC<FeedbackFormProps> = ({ onSave, feedbackMode = 'ai'
             <section className="bg-gray-800 rounded-2xl shadow-xl p-6 md:p-8 border border-gray-700">
               <h2 className="text-2xl font-bold border-b-2 border-gray-700 pb-3 mb-6 text-indigo-400 flex items-center gap-3">
                 Inteligência Artificial
+                <Tooltip content={TOOLTIP_CONTENT.ai.inteligencia_artificial} />
                 <span className="text-xs font-semibold px-2.5 py-1 rounded-full bg-purple-500/20 text-purple-300 border border-purple-500/30">
                   Beta
                 </span>
               </h2>
-            <div className="space-y-5 text-sm">
-              {/* Fornecimento de Soluções */}
-              <div>
-                <p className="text-gray-400 font-medium mb-2">Fornecimento de Soluções</p>
-                <div className="flex gap-3">
-                  {(["hint", "yes", "no"] as const).map((type) => (
-                    <button
-                      key={type}
-                      onClick={() => feedbackForm.setSolutionType(type)}
-                      className={`px-3 py-1 rounded-full text-xs font-semibold shadow-md transition-colors ${
-                        feedbackForm.solutionType === type 
-                          ? "bg-indigo-600 text-white" 
+              <div className="space-y-5 text-sm">
+                {/* Fornecimento de Soluções */}
+                <div>
+                  <div className="flex items-center gap-2 mb-2">
+                    <p className="text-gray-400 font-medium">
+                      Fornecimento de Soluções
+                    </p>
+                    <Tooltip content={TOOLTIP_CONTENT.ai.Fornecimento_de_solucoes} />
+                  </div>
+
+                  <div className="flex gap-3">
+                    {(["hint", "yes", "no"] as const).map((type) => (
+                      <button
+                        key={type}
+                        onClick={() => feedbackForm.setSolutionType(type)}
+                        className={`px-3 py-1 rounded-full text-xs font-semibold shadow-md transition-colors ${feedbackForm.solutionType === type
+                          ? "bg-indigo-600 text-white"
                           : "bg-gray-700 text-gray-300 hover:bg-gray-600"
-                      }`}
-                    >
-                      {type === "hint" ? "Dica" : type === "yes" ? "Sim" : "Não"}
-                    </button>
-                  ))}
+                          }`}
+                      >
+                        {type === "hint" ? "Dica" : type === "yes" ? "Sim" : "Não"}
+                      </button>
+                    ))}
+                  </div>
                 </div>
-              </div>
-              
-              {/* Tom do Feedback */}
-              <ReportTitleInput
-                title={feedbackForm.feedbackTone}
-                onChange={feedbackForm.setFeedbackTone}
-                label="Tom do Feedback"
-                placeholder='Ex: "amigável, encorajador e direto ao ponto"'
-              />
-              
-              {/* Persona do Feedback */}
-              <ReportTitleInput
-                title={feedbackForm.feedbackPersona}
-                onChange={feedbackForm.setFeedbackPersona}
-                label="Persona do Feedback"
-                placeholder="Ex: Code Buddy, um colega programador mais experiente"
-              />
-              
-              {/* Contexto da Atividade */}
-              <div className="space-y-1">
-                <p className="text-gray-400 font-medium text-sm">Contexto da Atividade</p>
-                <textarea
-                  value={feedbackForm.activityContext}
-                  onChange={(e: ChangeEvent<HTMLTextAreaElement>) => feedbackForm.setActivityContext(e.target.value)}
-                  className="w-full bg-gray-700 border border-gray-600 rounded-xl p-4 text-gray-300 text-xs leading-relaxed focus:outline-none focus:border-indigo-500 focus:ring-1 focus:ring-indigo-500 min-h-[150px] resize-y"
-                  placeholder="Descreva o contexto da atividade..."
+
+                {/* Tom do Feedback */}
+                <ReportTitleInput
+                  title={feedbackForm.feedbackTone}
+                  onChange={feedbackForm.setFeedbackTone}
+                  label={
+                    <span className="flex items-center gap-2">
+                      Tom do Feedback
+                      <Tooltip content={TOOLTIP_CONTENT.ai.Tom_do_feedback} />
+                    </span>
+                  }
+                  placeholder='Ex: "amigável, encorajador e direto ao ponto"'
                 />
-              </div>
-              
-              {/* Orientações Extras */}
-              <div className="space-y-1">
-                <p className="text-gray-400 font-medium text-sm">Orientações Extras</p>
-                <textarea
-                  value={feedbackForm.extraGuidelines}
-                  onChange={(e: ChangeEvent<HTMLTextAreaElement>) => feedbackForm.setExtraGuidelines(e.target.value)}
-                  className="w-full bg-gray-700 border border-gray-600 rounded-xl p-4 text-gray-300 text-xs leading-relaxed focus:outline-none focus:border-indigo-500 focus:ring-1 focus:ring-indigo-500 min-h-[200px] resize-y"
-                  placeholder="Digite as orientações extras aqui..."
+
+
+                {/* Persona do Feedback */}
+                <ReportTitleInput
+                  title={feedbackForm.feedbackPersona}
+                  onChange={feedbackForm.setFeedbackPersona}
+                  label={
+                    <span className="flez items-center gap-2">
+                      Persona do Feedback
+                      <Tooltip content={TOOLTIP_CONTENT.ai.Persona_do_feedback} />
+                    </span>
+                  }
+                  placeholder="Ex: Code Buddy, um colega programador mais experiente"
                 />
-              </div>
-              
-              {/* Arquivos para Leitura */}
-              <div className="space-y-3 ">
-                <div className="flex flex-col justify-between gap-3">
-                  <p className="text-gray-400 font-medium">Arquivos para Leitura</p>
-                  <div className="flex gap-2 items-center">
-                    <input
-                      type="text"
-                      value={currentFileInput.value}
-                      onChange={currentFileInput.onChange}
-                      placeholder="Nome do arquivo..."
-                      className="bg-gray-700 border border-gray-600 rounded-lg px-3 py-1 text-sm text-gray-200 placeholder-gray-400 focus:outline-none focus:border-indigo-500 focus:ring-1 focus:ring-indigo-500"
-                    />
-                    <button
-                      onClick={() => {
-                        if (currentFileInput.value.trim()) {
-                          readingFilesState.add(currentFileInput.value.trim());
-                          currentFileInput.clear();
-                        }
-                      }}
-                      type="button"
-                      className="bg-indigo-600 text-white px-3 py-1 rounded-lg text-sm hover:bg-indigo-700 transition-colors"
-                    >
-                      Adicionar
-                    </button>
+
+                {/* Contexto da Atividade */}
+                <div className="space-y-1">
+                  <div className="flex items-center gap-2">
+                    <p className="text-gray-400 font-medium text-sm">Contexto da Atividade</p>
+                    <Tooltip content={TOOLTIP_CONTENT.ai.Contexto_da_atividade} />
                   </div>
+                  <textarea
+                    value={feedbackForm.activityContext}
+                    onChange={(e: ChangeEvent<HTMLTextAreaElement>) => feedbackForm.setActivityContext(e.target.value)}
+                    className="w-full bg-gray-700 border border-gray-600 rounded-xl p-4 text-gray-300 text-xs leading-relaxed focus:outline-none focus:border-indigo-500 focus:ring-1 focus:ring-indigo-500 min-h-[150px] resize-y"
+                    placeholder="Descreva o contexto da atividade..."
+                  />
                 </div>
 
-                <div>
-                  {readingFilesState.items.length === 0 ? (
-                    <p className="text-gray-500 italic text-sm">Nenhum arquivo adicionado</p>
-                  ) : (
-                    <div className="flex flex-wrap gap-2">
-                      {readingFilesState.items.map((file, index) => (
-                        <div
-                          key={index}
-                          className="group flex items-center bg-indigo-600 text-white text-xs font-mono font-semibold px-3 py-1 rounded-full shadow-md"
-                        >
-                          {file}
-                          <button
-                            onClick={() => readingFilesState.remove(index)}
-                            className="ml-2 text-indigo-200 hover:text-white opacity-0 group-hover:opacity-100 transition-opacity"
-                          >
-                            ×
-                          </button>
-                        </div>
-                      ))}
+                {/* Orientações Extras */}
+                <div className="space-y-1">
+                  <div className="flex items-center gap-2">
+                    <p className="text-gray-400 font-medium text-sm">Orientações Extras</p>
+                    <Tooltip content={TOOLTIP_CONTENT.ai.Orientacoes_extras} />
+                  </div>
+                  <textarea
+                    value={feedbackForm.extraGuidelines}
+                    onChange={(e: ChangeEvent<HTMLTextAreaElement>) => feedbackForm.setExtraGuidelines(e.target.value)}
+                    className="w-full bg-gray-700 border border-gray-600 rounded-xl p-4 text-gray-300 text-xs leading-relaxed focus:outline-none focus:border-indigo-500 focus:ring-1 focus:ring-indigo-500 min-h-[200px] resize-y"
+                    placeholder="Digite as orientações extras aqui..."
+                  />
+                </div>
+
+                {/* Arquivos para Leitura */}
+                <div className="space-y-3 ">
+                  <div className="flex flex-col justify-between gap-3">
+                    <div className="flex items-center gap-2">
+                      <p className="text-gray-400 font-medium">Arquivos para Leitura</p>
+                      <Tooltip content={TOOLTIP_CONTENT.ai.Arquivos_para_leitura} />
                     </div>
-                  )}
+
+                    <div className="flex gap-2 items-center">
+                      <input
+                        type="text"
+                        value={currentFileInput.value}
+                        onChange={currentFileInput.onChange}
+                        placeholder="Nome do arquivo..."
+                        className="bg-gray-700 border border-gray-600 rounded-lg px-3 py-1 text-sm text-gray-200 placeholder-gray-400 focus:outline-none focus:border-indigo-500 focus:ring-1 focus:ring-indigo-500"
+                      />
+                      <button
+                        onClick={() => {
+                          if (currentFileInput.value.trim()) {
+                            readingFilesState.add(currentFileInput.value.trim());
+                            currentFileInput.clear();
+                          }
+                        }}
+                        type="button"
+                        className="bg-indigo-600 text-white px-3 py-1 rounded-lg text-sm hover:bg-indigo-700 transition-colors"
+                      >
+                        Adicionar
+                      </button>
+                    </div>
+                  </div>
+
+                  <div>
+                    {readingFilesState.items.length === 0 ? (
+                      <p className="text-gray-500 italic text-sm">Nenhum arquivo adicionado</p>
+                    ) : (
+                      <div className="flex flex-wrap gap-2">
+                        {readingFilesState.items.map((file, index) => (
+                          <div
+                            key={index}
+                            className="group flex items-center bg-indigo-600 text-white text-xs font-mono font-semibold px-3 py-1 rounded-full shadow-md"
+                          >
+                            {file}
+                            <button
+                              onClick={() => readingFilesState.remove(index)}
+                              className="ml-2 text-indigo-200 hover:text-white opacity-0 group-hover:opacity-100 transition-opacity"
+                            >
+                              ×
+                            </button>
+                          </div>
+                        ))}
+                      </div>
+                    )}
+                  </div>
                 </div>
               </div>
-            </div>
-          </section>
+            </section>
           )}
 
           {/* Save Button - Always visible at the end */}
-          <SaveButton 
+          <SaveButton
             isSaved={isSaved}
             showAnimation={saveButtonAnimation}
             showSuccessToast={showSaveSuccess}
diff --git a/src/shared/Tooltip.tsx b/src/shared/Tooltip.tsx
new file mode 100644
index 0000000..2f48ce1
--- /dev/null
+++ b/src/shared/Tooltip.tsx
@@ -0,0 +1,61 @@
+import React, { useState, ReactNode } from 'react';
+
+interface TooltipProps {
+  content: string;
+  children?: ReactNode;
+  position?: 'top' | 'bottom';
+}
+
+export const Tooltip = ({ content, children, position = 'top' }: TooltipProps) => {
+  const [isVisible, setIsVisible] = useState(false);
+
+  return (
+    <div 
+      className="relative inline-flex items-center justify-center align-middle"
+      onMouseEnter={() => setIsVisible(true)}
+      onMouseLeave={() => setIsVisible(false)}
+      onFocus={() => setIsVisible(true)}
+      onBlur={() => setIsVisible(false)}
+    >
+      {children ? (
+        children
+      ) : (
+        <div className="cursor-help text-gray-400 hover:text-indigo-400 transition-colors p-0.5">
+          <svg 
+            xmlns="http://www.w3.org/2000/svg" 
+            fill="none" 
+            viewBox="0 0 24 24" 
+            strokeWidth={1.5} 
+            stroke="currentColor" 
+            className="w-5 h-5"
+          >
+            <path strokeLinecap="round" strokeLinejoin="round" d="M12 9v3.75m9-.75a9 9 0 11-18 0 9 9 0 0118 0zm-9 3.75h.008v.008H12v-.008z" />
+          </svg>
+        </div>
+      )}
+      <div
+        role="tooltip"
+        className={`
+          absolute z-50 px-3 py-2 text-sm font-normal rounded-lg shadow-xl
+          w-64 md:w-72
+          whitespace-normal text-left break-words leading-relaxed
+          bg-gray-800 text-gray-100 border border-gray-700
+          left-1/2 -translate-x-1/2
+          ${position === 'top' ? 'bottom-full mb-2' : 'top-full mt-2'}
+          transition-all duration-300 ease-in-out
+          ${isVisible 
+            ? 'opacity-100 visible translate-y-0 scale-100' 
+            : 'opacity-0 invisible translate-y-2 scale-95'}
+        `}
+      >
+        {content}
+        <div 
+          className={`
+            absolute left-1/2 -translate-x-1/2 border-4 border-transparent
+            ${position === 'top' ? 'top-full border-t-gray-800' : 'bottom-full border-b-gray-800'}
+          `}
+        />
+      </div>
+    </div>
+  );
+};
\ No newline at end of file
diff --git a/src/shared/index.ts b/src/shared/index.ts
index fd76597..d35f4cb 100644
--- a/src/shared/index.ts
+++ b/src/shared/index.ts
@@ -3,3 +3,4 @@ export { default as LoadingState } from './LoadingState';
 export { default as ErrorState } from './ErrorState';
 export { default as EmptyState } from './EmptyState';
 export { default as SaveButton } from './SaveButton';
+export * from './Tooltip';
\ No newline at end of file

From f048e958a4412fa331024ea6e8f2b81d3f2bba31 Mon Sep 17 00:00:00 2001
From: Silas <silasrviana@gmail.com>
Date: Fri, 30 Jan 2026 13:56:02 -0300
Subject: [PATCH 2/2] fix: update logic and apply best practices

---
 .../feedback/components/ReportTitleInput.tsx  | 17 +++--
 .../feedback/components/ToggleSwitch.tsx      | 13 ++--
 .../feedback/config/TooltipContent.ts         |  2 +-
 src/components/feedback/index.tsx             | 62 ++++++-------------
 4 files changed, 41 insertions(+), 53 deletions(-)

diff --git a/src/components/feedback/components/ReportTitleInput.tsx b/src/components/feedback/components/ReportTitleInput.tsx
index ab1522f..9792775 100644
--- a/src/components/feedback/components/ReportTitleInput.tsx
+++ b/src/components/feedback/components/ReportTitleInput.tsx
@@ -1,9 +1,11 @@
-import React, { ChangeEvent, ReactNode } from 'react';
+import React, { ChangeEvent } from 'react';
+import { Tooltip } from '../../../shared';
 
 interface ReportTitleInputProps {
   title: string;
   onChange: (value: string) => void;
-  label?: ReactNode;
+  label?: string;
+  tooltipText?: string;
   placeholder?: string;
 }
 
@@ -11,13 +13,18 @@ const ReportTitleInput: React.FC<ReportTitleInputProps> = ({
   title, 
   onChange, 
   label = "Título do Relatório",
+  tooltipText,
   placeholder = "Digite o título do relatório"
 }) => {
   return (
     <div>
-      <label className="text-gray-400 font-medium mb-1 text-sm block">
-        {label}
-      </label>
+      <div className="flex items-center gap-2 mb-1">
+        <label className="text-gray-400 font-medium mb-1 text-sm block">
+          {label}
+        </label>
+        {tooltipText && <Tooltip content={tooltipText} />}
+      </div>
+      
       <input
         type="text"
         value={title}
diff --git a/src/components/feedback/components/ToggleSwitch.tsx b/src/components/feedback/components/ToggleSwitch.tsx
index 0303acd..18f7c2b 100644
--- a/src/components/feedback/components/ToggleSwitch.tsx
+++ b/src/components/feedback/components/ToggleSwitch.tsx
@@ -1,17 +1,22 @@
-import React, { ChangeEvent, ReactNode } from 'react';
+import React, { ChangeEvent } from 'react';
+import { Tooltip } from '../../../shared';
 
 interface ToggleSwitchProps {
   id: string;
-  label: ReactNode;
+  label: string;
+  tooltipText?: string;
   isChecked: boolean;
   onChange: (e: ChangeEvent<HTMLInputElement>) => void;
 }
 
-const ToggleSwitch: React.FC<ToggleSwitchProps> = ({ id, label, isChecked, onChange }) => {
+const ToggleSwitch: React.FC<ToggleSwitchProps> = ({ id, label, tooltipText, isChecked, onChange }) => {
   const containerId = `toggle-${id}`;
   return (
     <div className="flex items-center justify-between bg-gray-800 p-3 rounded-xl border border-gray-700 shadow-md">
-      <span className="font-medium text-gray-300 text-sm">{label}</span>
+      <div className="fex items-center gap-2">
+        <span className="font-medium text-gray-300 text-sm">{label}</span>
+        {tooltipText && <Tooltip content={tooltipText} />}
+      </div>
       <div className="relative inline-block w-10 mr-2 align-middle select-none">
         <input 
           type="checkbox" 
diff --git a/src/components/feedback/config/TooltipContent.ts b/src/components/feedback/config/TooltipContent.ts
index 36e93ac..3f77e12 100644
--- a/src/components/feedback/config/TooltipContent.ts
+++ b/src/components/feedback/config/TooltipContent.ts
@@ -1,4 +1,4 @@
-export const TOOLTIP_CONTENT = {
+export const TooltipContent = {
   header: {},
   geral: {
     Titulo_do_relatorio: "Define o título que aparecerá no topo do relatório de feedback gerado",
diff --git a/src/components/feedback/index.tsx b/src/components/feedback/index.tsx
index de6b714..1b43002 100644
--- a/src/components/feedback/index.tsx
+++ b/src/components/feedback/index.tsx
@@ -6,7 +6,7 @@ import ResourceList from './components/ResourceList';
 import { SaveButton, Tooltip } from '../../shared';
 import { useSaveState, useArrayState, useFormInput } from '../../hooks';
 import useFeedbackForm, { FeedbackConfig, OnlineResource } from './hooks/useFeedbackForm';
-import { TOOLTIP_CONTENT } from './config/TooltipContent';
+import { TooltipContent } from './config/TooltipContent';
 
 type FeedbackMode = 'ai' | 'static' | 'default';
 
@@ -72,12 +72,8 @@ const FeedbackForm: React.FC<FeedbackFormProps> = ({ onSave, feedbackMode = 'ai'
               <ReportTitleInput
                 title={feedbackForm.reportTitle}
                 onChange={feedbackForm.setReportTitle}
-                label={
-                  <span className="flex items-center gap-2">
-                    Título do Relatório
-                    <Tooltip content={TOOLTIP_CONTENT.geral.Titulo_do_relatorio} />
-                  </span>
-                }
+                label="Título do Relatório"
+                tooltipText={TooltipContent.geral.Titulo_do_relatorio}
               />
 
               {/* Configurações Booleanas */}
@@ -86,34 +82,22 @@ const FeedbackForm: React.FC<FeedbackFormProps> = ({ onSave, feedbackMode = 'ai'
                   id="show_score"
                   isChecked={feedbackForm.toggleStates.show_score}
                   onChange={() => feedbackForm.handleToggle('show_score')}
-                  label={
-                    <span className="flex items-center gap-2">
-                      Exibir Pontuação
-                      <Tooltip content={TOOLTIP_CONTENT.geral.Exibir_pontuacao} />
-                    </span>
-                  }
+                  label="Exibir Pontuação"
+                  tooltipText={TooltipContent.geral.Exibir_pontuacao}
                 />
                 <ToggleSwitch
                   id="show_passed_tests"
                   isChecked={feedbackForm.toggleStates.show_passed_tests}
                   onChange={() => feedbackForm.handleToggle('show_passed_tests')}
-                  label={
-                    <span className="flex items-center gap-2">
-                      Exibir Testes Aprovados
-                      <Tooltip content={TOOLTIP_CONTENT.geral.Exibir_testes_aprovados} />
-                    </span>
-                  }
+                  label="Exibir Testes Aprovados"
+                  tooltipText={TooltipContent.geral.Exibir_testes_aprovados}
                 />
                 <ToggleSwitch
                   id="add_report_summary"
                   isChecked={feedbackForm.toggleStates.add_report_summary}
                   onChange={() => feedbackForm.handleToggle('add_report_summary')}
-                  label={
-                    <span className="flex items-center gap-2">
-                      Adicionar Resumo
-                      <Tooltip content={TOOLTIP_CONTENT.geral.Adicionar_resumo} />
-                    </span>
-                  }
+                  label="Adicionar Resumo"
+                  tooltipText={TooltipContent.geral.Adicionar_resumo}
                 />
 
               </div>
@@ -125,7 +109,7 @@ const FeedbackForm: React.FC<FeedbackFormProps> = ({ onSave, feedbackMode = 'ai'
                     <p className="text-gray-400 font-medium">
                       Adicionar Conteúdo Online de Apoio
                     </p>
-                    <Tooltip content={TOOLTIP_CONTENT.geral.Adicionar_conteudo_online_de_apoio} />
+                    <Tooltip content={TooltipContent.geral.Adicionar_conteudo_online_de_apoio} />
                   </div>
                   <ResourceForm onSubmit={handleAddResource} />
                 </div>
@@ -143,7 +127,7 @@ const FeedbackForm: React.FC<FeedbackFormProps> = ({ onSave, feedbackMode = 'ai'
             <section className="bg-gray-800 rounded-2xl shadow-xl p-6 md:p-8 border border-gray-700">
               <h2 className="text-2xl font-bold border-b-2 border-gray-700 pb-3 mb-6 text-indigo-400 flex items-center gap-3">
                 Inteligência Artificial
-                <Tooltip content={TOOLTIP_CONTENT.ai.inteligencia_artificial} />
+                <Tooltip content={TooltipContent.ai.inteligencia_artificial} />
                 <span className="text-xs font-semibold px-2.5 py-1 rounded-full bg-purple-500/20 text-purple-300 border border-purple-500/30">
                   Beta
                 </span>
@@ -155,7 +139,7 @@ const FeedbackForm: React.FC<FeedbackFormProps> = ({ onSave, feedbackMode = 'ai'
                     <p className="text-gray-400 font-medium">
                       Fornecimento de Soluções
                     </p>
-                    <Tooltip content={TOOLTIP_CONTENT.ai.Fornecimento_de_solucoes} />
+                    <Tooltip content={TooltipContent.ai.Fornecimento_de_solucoes} />
                   </div>
 
                   <div className="flex gap-3">
@@ -178,12 +162,8 @@ const FeedbackForm: React.FC<FeedbackFormProps> = ({ onSave, feedbackMode = 'ai'
                 <ReportTitleInput
                   title={feedbackForm.feedbackTone}
                   onChange={feedbackForm.setFeedbackTone}
-                  label={
-                    <span className="flex items-center gap-2">
-                      Tom do Feedback
-                      <Tooltip content={TOOLTIP_CONTENT.ai.Tom_do_feedback} />
-                    </span>
-                  }
+                  label="Tom do Feedback"
+                  tooltipText={TooltipContent.ai.Tom_do_feedback}
                   placeholder='Ex: "amigável, encorajador e direto ao ponto"'
                 />
 
@@ -192,12 +172,8 @@ const FeedbackForm: React.FC<FeedbackFormProps> = ({ onSave, feedbackMode = 'ai'
                 <ReportTitleInput
                   title={feedbackForm.feedbackPersona}
                   onChange={feedbackForm.setFeedbackPersona}
-                  label={
-                    <span className="flez items-center gap-2">
-                      Persona do Feedback
-                      <Tooltip content={TOOLTIP_CONTENT.ai.Persona_do_feedback} />
-                    </span>
-                  }
+                  label="Persona do Feedback"
+                  tooltipText={TooltipContent.ai.Persona_do_feedback}
                   placeholder="Ex: Code Buddy, um colega programador mais experiente"
                 />
 
@@ -205,7 +181,7 @@ const FeedbackForm: React.FC<FeedbackFormProps> = ({ onSave, feedbackMode = 'ai'
                 <div className="space-y-1">
                   <div className="flex items-center gap-2">
                     <p className="text-gray-400 font-medium text-sm">Contexto da Atividade</p>
-                    <Tooltip content={TOOLTIP_CONTENT.ai.Contexto_da_atividade} />
+                    <Tooltip content={TooltipContent.ai.Contexto_da_atividade} />
                   </div>
                   <textarea
                     value={feedbackForm.activityContext}
@@ -219,7 +195,7 @@ const FeedbackForm: React.FC<FeedbackFormProps> = ({ onSave, feedbackMode = 'ai'
                 <div className="space-y-1">
                   <div className="flex items-center gap-2">
                     <p className="text-gray-400 font-medium text-sm">Orientações Extras</p>
-                    <Tooltip content={TOOLTIP_CONTENT.ai.Orientacoes_extras} />
+                    <Tooltip content={TooltipContent.ai.Orientacoes_extras} />
                   </div>
                   <textarea
                     value={feedbackForm.extraGuidelines}
@@ -234,7 +210,7 @@ const FeedbackForm: React.FC<FeedbackFormProps> = ({ onSave, feedbackMode = 'ai'
                   <div className="flex flex-col justify-between gap-3">
                     <div className="flex items-center gap-2">
                       <p className="text-gray-400 font-medium">Arquivos para Leitura</p>
-                      <Tooltip content={TOOLTIP_CONTENT.ai.Arquivos_para_leitura} />
+                      <Tooltip content={TooltipContent.ai.Arquivos_para_leitura} />
                     </div>
 
                     <div className="flex gap-2 items-center">