Quiz 08 — Toasts, tooltips, carousel
⏱️ TL;DR — 50 questions sur les toasts, tooltips, popovers, collapse, accordion, carousel et scrollspy (Partie 5). Réponds de tête, puis déplie.
1. Un toast est-il visible par défaut ?
Réponse
Non — masqué, affiché par JS (.show()).
2. Afficher un toast en JS ?
Réponse
new bootstrap.Toast(el).show().
3. Fermer un toast (attribut) ?
Réponse
data-bs-dismiss="toast".
4. Positionner des toasts en bas à droite ?
Réponse
toast-container position-fixed bottom-0 end-0.
5. Options d’auto-fermeture d’un toast ?
Réponse
data-bs-autohide, data-bs-delay.
6. Pourquoi tooltips/popovers sont-ils opt-in ?
Réponse
Performance : on n’initialise que ceux nécessaires.
7. Initialiser un tooltip en JS ?
Réponse
new bootstrap.Tooltip(el).
8. Attribut pour activer un tooltip ?
Réponse
data-bs-toggle="tooltip".
9. Placer un tooltip en bas ?
Réponse
data-bs-placement="bottom".
10. Texte d’un tooltip ?
Réponse
data-bs-title.
11. Différence tooltip vs popover ?
Réponse
Popover = titre + contenu plus riche, souvent au clic.
12. Attribut d’un popover ?
Réponse
data-bs-toggle="popover".
13. Contenu d’un popover ?
Réponse
data-bs-content.
14. Quelle lib positionne tooltips/popovers ?
Réponse
Popper.
15. « Mon tooltip ne s’affiche pas » : cause n°1 ?
Réponse
Oubli de l’initialisation JS.
16. En React, composant pour tooltip ?
Réponse
<OverlayTrigger> + <Tooltip>.
17. Attribut qui plie/déplie un bloc (collapse) ?
Réponse
data-bs-toggle="collapse".
18. Un déclencheur peut-il piloter plusieurs cibles ?
Réponse
Oui, via un sélecteur (data-bs-target=".multi").
19. Classe de base d’un accordéon ?
Réponse
.accordion.
20. Item d’accordéon ?
Réponse
.accordion-item.
21. Qu’est-ce qui rend un accordéon « exclusif » ?
Réponse
data-bs-parent pointant vers le conteneur.
22. Rendre les items d’accordéon indépendants ?
Réponse
Retirer data-bs-parent (ou accordion-flush).
23. Bouton d’accordéon fermé, quelle classe ?
Réponse
accordion-button collapsed.
24. Classe de base d’un carousel ?
Réponse
.carousel .slide.
25. Lancer le défilement auto d’un carousel ?
Réponse
data-bs-ride="carousel".
26. Élément qui contient les slides ?
Réponse
carousel-inner (+ carousel-item).
27. Quel slide porte active au départ ?
Réponse
Un seul.
28. Contrôles précédent/suivant ?
Réponse
carousel-control-prev / carousel-control-next.
29. Indicateurs de slides ?
Réponse
carousel-indicators (+ boutons data-bs-slide-to).
30. Légendes de slides ?
Réponse
carousel-caption.
31. Problème classique du carousel ?
Réponse
Images de hauteurs différentes → « saute ».
32. Corriger la hauteur des images de carousel ?
Réponse
Dimensions fixes ou object-fit: cover.
33. À quoi sert scrollspy ?
Réponse
Surligner l’item de nav de la section visible.
34. Activer scrollspy (attribut) ?
Réponse
data-bs-spy="scroll" + data-bs-target.
35. Condition pour que scrollspy marche ?
Réponse
Les href de la nav = les id des sections.
36. Événement de fin de transition d’un carousel ?
Réponse
slid.bs.carousel.
37. Événement de début de slide ?
Réponse
slide.bs.carousel.
38. En React, composants carousel/accordion ?
Réponse
<Carousel> et <Accordion> de react-bootstrap.
39. Un toast a besoin de Popper ?
Réponse
Non.
40. Le collapse a besoin de Popper ?
Réponse
Non.
41. Un bouton qui affiche/masque un panneau de filtres ?
Réponse
data-bs-toggle="collapse" + un <div class="collapse">.
42. Trigger d’un popover au survol ?
Réponse
data-bs-trigger="hover".
43. Un tooltip a-t-il besoin d’être accessible ?
Réponse
Oui (le texte doit être associé à un élément focusable).
44. Rôle ARIA d’un toast ?
Réponse
role="alert" + aria-live.
45. Un accordéon FAQ ouvert une question à la fois ?
Réponse
data-bs-parent sur chaque collapse.
46. Auto-init de tooltips fragile en React : pourquoi ?
Réponse
Éléments montés/démontés dynamiquement.
47. Nettoyer un tooltip en React ?
Réponse
.dispose() dans le cleanup du useEffect.
48. Un carousel sans contrôles : possible ?
Réponse
Oui (défilement auto seul).
49. Faire défiler un carousel au clavier ?
Réponse
Support natif (option keyboard).
50. accordion-body contient quoi ?
Réponse
Le contenu de la section.
Quiz suivant : Quiz 09 — Formulaires (1).