Skip to Content
BootstrapPartie 5 — Navigation & overlays5.5 — Toasts, tooltips, popovers

5.5 — Toasts, tooltips, popovers

⏱️ TL;DR — Un toast (.toast) est une notification discrète, montrée en JS (.show()). Un tooltip (data-bs-toggle="tooltip") est une infobulle au survol ; un popover (data-bs-toggle="popover") une infobulle plus riche au clic. Tooltips et popovers utilisent Popper et doivent être initialisés en JS (opt-in, pour la performance).

🎯 Objectifs

  • Afficher des toasts de notification.
  • Initialiser et configurer tooltips et popovers.
  • Comprendre pourquoi ils sont opt-in.

Toast

<div class="toast-container position-fixed bottom-0 end-0 p-3">
  <div id="monToast" class="toast" role="alert" aria-live="assertive" aria-atomic="true">
    <div class="toast-header">
      <strong class="me-auto">Notification</strong>
      <button class="btn-close" data-bs-dismiss="toast" aria-label="Fermer"></button>
    </div>
    <div class="toast-body">Message enregistré.</div>
  </div>
</div>
const toast = new bootstrap.Toast('#monToast')
toast.show()

Les toasts sont masqués par défaut et affichés par JS. Options : data-bs-autohide, data-bs-delay.

Tooltip (à initialiser)

<button class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-title="Infobulle !">
  Survolez-moi
</button>
// initialisation obligatoire (opt-in)
document.querySelectorAll('[data-bs-toggle="tooltip"]')
  .forEach(el => new bootstrap.Tooltip(el))

Placement : data-bs-placement="top|right|bottom|left".

Popover (à initialiser)

<button class="btn btn-primary" data-bs-toggle="popover"
        data-bs-title="Titre" data-bs-content="Contenu plus riche.">
  Cliquez-moi
</button>
document.querySelectorAll('[data-bs-toggle="popover"]')
  .forEach(el => new bootstrap.Popover(el))

Déclenchement : data-bs-trigger="focus" (ferme au clic ailleurs), hover, click.

Pourquoi opt-in ?

Initialiser un tooltip sur chaque élément d’une page coûte cher. Bootstrap laisse donc le choix : vous n’activez que ce dont vous avez besoin, via new bootstrap.Tooltip(...). C’est un compromis performance délibéré.

⚠️ Piège — « Mon tooltip ne s’affiche pas. » 9 fois sur 10, vous avez oublié l’initialisation JS. Contrairement à la modale ou au dropdown (data-API automatique), tooltips et popovers doivent être instanciés.

💡 Pour un dev React — L’initialisation manuelle par querySelectorAll est fragile avec le rendu React (éléments montés/démontés). Utilisez <OverlayTrigger> + <Tooltip>/<Popover> de react-bootstrap, ou initialisez dans un useEffect avec cleanup (.dispose()).

✏️ Exercices

  1. Un tooltip « Copier » sur un bouton, placé en bas.

✅ Solution

<button data-bs-toggle="tooltip" data-bs-placement="bottom" data-bs-title="Copier">…</button> + l’initialisation JS.

  1. Un toast en bas à droite déclenché par un bouton.

✅ Solution

Placer le toast dans un toast-container position-fixed bottom-0 end-0 et appeler new bootstrap.Toast('#id').show() au clic.

🧠 Quiz de révision

1. Un toast est-il visible par défaut ?

Non — il est masqué et affiché par JS (.show()).

2. Pourquoi tooltips/popovers sont-ils opt-in ?

Pour des raisons de performance : on n’initialise que ceux dont on a besoin.

3. Quel attribut place un tooltip en haut ?

data-bs-placement="top".

4. Différence tooltip vs popover ?

Le popover peut avoir un titre + contenu plus riche et s’ouvre souvent au clic ; le tooltip est une simple infobulle au survol.

5. Quelle lib positionne tooltips et popovers ?

Popper.

Chapitre suivant : 5.6 — Collapse, accordion, carousel, scrollspy

5.4 — Modal & offcanvas5.6 — Collapse, accordion, carousel, scrollspy