Sans CSS, le contenu de la tooltip reste affiché près de son bouton (#1025)

* remove teleport for user impact tooltip

* update changelog

Author: bellangerq

CHANGELOG.md

@@ -6,6 +6,7 @@ Tous les changements notables de Ara sont documentés ici avec leur date, leur c
 
 ### Corrections 🐛
 
+- Corrige l’affichage du contenu des infobulles lorsque le CSS est désactivé ([#1025](https://github.com/DISIC/Ara/pull/1025))
 - Ajoute des bordures aux champs de saisie pour améliorer leur accessibilité ([#1038](https://github.com/DISIC/Ara/pull/1038))
 
 ## 02/04/2025

confiture-web-app/src/components/audit/CriteriumNotCompliantAccordion.vue

@@ -159,38 +159,36 @@ const title = "Erreur et recommandation";
             Informations sur l’impact usager
           </button>
 
-          <Teleport to="body">
-            <div
-              id="tooltip"
-              class="fr-tooltip fr-placement"
-              role="tooltip"
-              data-fr-js-tooltip="true"
-            >
-              <p class="fr-text--xs fr-mb-1w">
-                <strong>Bloquant</strong> : empêche complètement l’accès ou
-                l’utilisation.<br />
-                <span class="user-impact-example"
-                  >Ex : il est impossible de soumettre un formulaire au
-                  clavier.</span
-                >
-              </p>
-              <p class="fr-text--xs fr-mb-1w">
-                <strong>Majeur</strong> : rend l’accès ou l’utilisation
-                difficile.<br />
-                <span class="user-impact-example"
-                  >Ex : les champs ne sont pas regroupés.</span
-                >
-              </p>
-              <p class="fr-text--xs fr-mb-0">
-                <strong>Mineur</strong> : gêne légèrement sans empêcher l’accès
-                ou l’utilisation.<br />
-                <span class="user-impact-example"
-                  >Ex : des retours à la ligne sont utilisés pour espacer des
-                  textes.</span
-                >
-              </p>
-            </div>
-          </Teleport>
+          <div
+            id="tooltip"
+            class="fr-tooltip fr-placement"
+            role="tooltip"
+            data-fr-js-tooltip="true"
+          >
+            <p class="fr-text--xs fr-mb-1w">
+              <strong>Bloquant</strong> : empêche complètement l’accès ou
+              l’utilisation.<br />
+              <span class="user-impact-example"
+                >Ex : il est impossible de soumettre un formulaire au
+                clavier.</span
+              >
+            </p>
+            <p class="fr-text--xs fr-mb-1w">
+              <strong>Majeur</strong> : rend l’accès ou l’utilisation
+              difficile.<br />
+              <span class="user-impact-example"
+                >Ex : les champs ne sont pas regroupés.</span
+              >
+            </p>
+            <p class="fr-text--xs fr-mb-0">
+              <strong>Mineur</strong> : gêne légèrement sans empêcher l’accès ou
+              l’utilisation.<br />
+              <span class="user-impact-example"
+                >Ex : des retours à la ligne sont utilisés pour espacer des
+                textes.</span
+              >
+            </p>
+          </div>
         </div>
       </template>
     </RadioGroup>