📝 docs(tooltip): ajout de documentation tooltip

src/dsfr/component/tooltip/_part/data.yml

@@ -0,0 +1 @@
+id: tooltip

src/dsfr/component/tooltip/_part/doc/accessibility/index.md

@@ -0,0 +1,36 @@
+---
+title: Accessibilité de l'Infobulle
+---
+# Infobulle
+
+:::dsfr-doc-tab-navigation
+- [Présentation](../index.md)
+- [Démo](../demo/index.md)
+- [Design](../design/index.md)
+- [Code](../code/index.md)
+- Accessibilité
+:::
+
+## Accessibilité
+
+Le composant **Infobulle** est conçu pour être accessible et suit les critères du RGAA. Voici les points clés d’accessibilité à prendre en compte :
+
+### Interactions clavier
+
+L'infobulle doit être accessible via le clavier. Assurez-vous que les éléments déclencheurs de l'infobulle sont accessibles avec la touche Tab et que l'infobulle est visible lors de la prise de focus.
+
+### Règles d'accessibilité
+
+- L'élément qui déclenche l'infobulle fait référence à l'élément conteneur avec l'attribut `aria-describeby`.
+- L'élément qui sert de conteneur d'infobulle a l'attribut  `role="tooltip"` ([tooltip](https://w3c.github.io/aria/#tooltip)) et `aria-hidden="true"` lorsqu'il est masqué.
+- Assurez-vous que le texte de l'infobulle est clair et concis.
+- Le contraste entre le texte de l'infobulle et son arrière-plan doit être suffisant pour être lisible.
+- L'infobulle doit disparaître lorsque l'utilisateur passe à un autre élément pour éviter toute confusion.
+
+### Bonnes pratiques
+Au lieu d'utiliser des infobulles et de masquer des informations importantes, pensez à rédiger des descriptions claires, succinctes et toujours visibles. Si vous avez de l'espace, n'utilisez pas d'infobulles. Fournissez simplement des libellés clairs et un corps de texte suffisant.
+
+### Références
+
+- [https://www.w3.org/WAI/WCAG21/quickref/](https://www.w3.org/WAI/WCAG21/quickref/)
+- [https://accessibilite.numerique.gouv.fr/methode/criteres-et-tests/](https://accessibilite.numerique.gouv.fr/methode/criteres-et-tests/)

src/dsfr/component/tooltip/_part/doc/code/index.md

@@ -0,0 +1,121 @@
+---
+title: Code de l'Infobulle
+---
+# Infobulle
+
+:::dsfr-doc-tab-navigation
+- [Présentation](../index.md)
+- [Démo](../demo/index.md)
+- [Design](../design/index.md)
+- Code
+- [Accessibilité](../accessibility/index.md)
+:::
+
+### HTML
+
+#### Structure du composant
+Il existe deux types d’infobulles suivant son déclenchement.
+
+##### Déclenchement au survol
+L’infobulle au survol se compose des éléments suivants :
+
+1. Une zone de déclenchement :
+    - Doit être un element focusable (`<a>`, `<input>`, `<select>`, `<textarea>`, etc) pour déclencher l'affichage du conteneur à la prise de focus.
+    - Elle est liée au conteneur via l'attribut `aria-describedby`, sa valeur doit correspondre à l'attribut `id` du conteneur.
+2. Un conteneur pour le texte de l'infobulle :
+    - Représenté par un élément `<span>`.
+    - Il dispose d'un attribut `id` obligatoire, pour être lié à la zone de déclenchement.
+    - Doit avoir la classe `fr-tooltip`.
+
+**Exemple de structure HTML**
+
+```HTML
+<a class="fr-link" aria-describedby="tooltip-2989" id="link-2990" href="#">
+    Exemple
+</a>
+<span class="fr-tooltip fr-placement" id="tooltip-2989" role="tooltip" aria-hidden="true">
+    Lorem [...] elit ut.
+</span>
+```
+
+##### Déclenchement au clic
+L’infobulle au clic se compose des éléments suivants :
+
+1. Une zone de déclenchement :
+    - La zone de déclenchement est une balise `<button type="button">`.
+    - Elle est liée au conteneur via l'attribut `aria-describedby`, sa valeur doit correspondre à l'attribut `id` du conteneur.
+    - Doit avoir les classes `fr-btn--tooltip fr-btn`.
+
+2. Un conteneur pour le texte de l'infobulle :
+    - Représenté par un élément `<span>`.
+    - Il dispose d'un attribut `id` obligatoire, pour être lié à la zone de déclenchement.
+    - Doit avoir la classe `fr-tooltip`.
+
+**Exemple de structure HTML**
+
+```HTML
+<button class="fr-btn--tooltip fr-btn" type="button" id="button-2995" aria-describedby="tooltip-2994">
+    Information contextuelle
+</button>
+<span class="fr-tooltip fr-placement" id="tooltip-2994" role="tooltip" aria-hidden="true">
+    Lorem [...] elit ut.
+</span>
+```
+
+---
+
+### CSS
+
+#### Installation
+
+Pour fonctionner correctement, le style CSS de l'infobulle et du core doit être importé dans la page. Les fichiers doivent être inclus dans le `<head>` avant le contenu de la page.
+
+```HTML
+<link href="dist/core/core.min.css" rel="stylesheet">
+<link href="dist/component/tooltip/tooltip.min.css" rel="stylesheet">
+```
+
+<small>NB: Il est aussi possible d'importer le CSS global du DSFR `dsfr.min.css`.</small>
+
+Pour une compatibilité avec Internet Explorer 11, les fichiers legacy peuvent également être ajoutés :
+
+```HTML
+<link href="dist/core/core.legacy.min.css" rel="stylesheet">
+<link href="dist/component/tooltip/tooltip.legacy.min.css" rel="stylesheet">
+```
+
+#### Styles du composant
+
+##### Variantes de position
+Le tooltip peut être positionné de différentes manières par rapport à l'élément cible :
+- Par défaut en haut.
+- `fr-tooltip--bottom` : En bas.
+- `fr-tooltip--left` : À gauche.
+- `fr-tooltip--right` : À droite.
+
+**Exemple de tooltip avec différentes positions**
+
+```HTML
+<div class="fr-tooltip fr-tooltip--bottom">
+  <span>Texte de l'infobulle</span>
+</div>
+```
+
+##### Accentuation
+Aucune personnalisation n'est possible.
+
+### JavaScript
+
+Le composant **Infobulle** nécessite du JavaScript pour fonctionner correctement. Assurez-vous d'inclure le fichier JavaScript correspondant dans votre projet.
+
+```HTML
+<script src="dist/component/tooltip/tooltip.min.js"></script>
+```
+
+---
+
+### Note de version
+
+[Voir les évolutions sur github](https://github.com/GouvernementFR/dsfr/pulls?q=is%3Apr+is%3Aclose+tooltip+)
+
+::dsfr-doc-changelog

src/dsfr/component/tooltip/_part/doc/demo/index.md

@@ -0,0 +1,17 @@
+---
+title: Démonstration de l'Infobulle
+---
+# Infobulle
+
+:::dsfr-doc-tab-navigation
+- [Présentation](../index.md)
+- Démo
+- [Design](../design/index.md)
+- [Code](../code/index.md)
+- [Accessibilité](../accessibility/index.md)
+:::
+
+
+## Démonstration
+
+::dsfr-doc-storybook{id=tooltip--docs}

src/dsfr/component/tooltip/_part/doc/design/index.md

@@ -0,0 +1,15 @@
+---
+title: Design de l'Infobulle
+---
+# Infobulle
+
+:::dsfr-doc-tab-navigation
+- [Présentation](../index.md)
+- [Démo](../demo/index.md)
+- Design
+- [Code](../code/index.md)
+- [Accessibilité](../accessibility/index.md)
+:::
+
+
+## Design

src/dsfr/component/tooltip/_part/doc/index.md

@@ -0,0 +1,16 @@
+---
+title: Infobulle
+---
+# Infobulle
+
+:::dsfr-doc-tab-navigation
+- Présentation
+- [Démo](./demo/index.md)
+- [Design](./design/index.md)
+- [Code](./code/index.md)
+- [Accessibilité](./accessibility/index.md)
+
+:::
+
+
+## Présentation