Historique des conversations
Chargement...
Chapitre 9 : Modales/Tooltips
1. Les Modales
Une modale est une fenêtre qui s'affiche par-dessus le contenu actuel pour attirer l'attention de l'utilisateur.
<!-- Bouton déclencheur -->
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#maModal">
Lancer la modale
</button>
<!-- Structure de la modale -->
<div class="modal fade" id="maModal" tabindex="-1">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Titre</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal"></button>
</div>
<div class="modal-body">Message de la modale...</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Fermer</button>
</div>
</div>
</div>
</div>2. Les Tooltips (Infobulles)
Petites boîtes de texte qui apparaissent au survol d'un élément.
<button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="top" title="Tooltip en haut">
Survolez-moi
</button>
Note : Les tooltips nécessitent une initialisation en JavaScript pour fonctionner.
Conclusion
L'interactivité est maintenant à son maximum. Prochaine étape : Utilitaires (Spacing, Flex, Shadow).
Objectifs du chapitre
- Comprendre les concepts clés de Modales et Tooltips.
- Savoir appliquer ces concepts sur un cas concret.
- Éviter les erreurs fréquentes et adopter les bonnes pratiques.
Explication
Ce chapitre vous guide pas à pas sur le thème Modales et Tooltips. L'idée est de partir d'une approche simple, puis de progresser vers des usages plus réalistes.
Exemple pratique
Essayez d'appliquer la notion vue ici dans un mini-exemple de votre projet personnel. Ensuite, comparez votre résultat avec les exercices associés pour valider votre compréhension.
À retenir
Maîtriser Modales et Tooltips vous permettra d'aller plus vite dans les chapitres suivants.
Ateliers pratiques & Projets
Testez vos compétences avec nos exercices guidés et le tuteur IA.
Ateliers pratiques & Corrigés détaillés
Ateliers pratiques & Corrigés
#1 — Comprendre les bases : Modales et Tooltips
Atelier #1Expliquez avec vos mots le concept principal de ce chapitre, puis illustrez-le par un exemple simple.
Correction instantanée et bienveillante
Diagnostic du tuteur IA Weegosoft :
Consulter la solution type du formateur
Solution de référence :
Corrigé disponible prochainement.
#2 — Application guidée
Atelier #2Réalisez un exercice pratique en reprenant la structure vue dans le cours et en modifiant au moins 2 paramètres.
Correction instantanée et bienveillante
Diagnostic du tuteur IA Weegosoft :
Consulter la solution type du formateur
Solution de référence :
Corrigé disponible prochainement.
#3 — Mini défi
Atelier #3Concevez une petite solution personnelle liée à 'Modales et Tooltips' et justifiez vos choix techniques.
Correction instantanée et bienveillante
Diagnostic du tuteur IA Weegosoft :
Consulter la solution type du formateur
Solution de référence :
Corrigé disponible prochainement.