Skip to content

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

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 2 commits into from
Apr 3, 2025
Merged

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

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
e6c5743
remove teleport for user impact tooltip
bellangerq Mar 27, 2025
f75d5ad
update changelog
bellangerq Apr 3, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions CHANGELOG.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
62 changes: 30 additions & 32 deletions confiture-web-app/src/components/audit/CriteriumNotCompliantAccordion.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down