Comment avoir plusieurs data-bs-toggle avec Bootstrap 5 ?

Question

Bonjour,

Ssur un texte je voudrais à la fois afficher un tooltip et un modal Bootstrap.

Pour le tooltip j'utilise data-bs-toggle="tooltip" et pour le modal je met data-bs-toggle="modal".

Quand je met les deux, seul le premier fonctionne. J'ai essayé data-bs-toggle="tooltip, modal" mais ça ne fonctionne pas non plus.

Comment dois-je faire ?

Answer 1

Vous ne pouvez pas utiliser plusieurs dataset du type data-bs-toggle sur une même balise HTML.

Une alternative à ce problème consiste à entourer votre texte de balises <span> imbriquées. Sur la première vous déclarez le modal, et sur la seconde le tooltip, ou vis et versa.

Voici un exemple :

<span data-bs-toggle="tooltip" data-bs-placement="top" data-bs-title="Texte du Tooltip">
  <span data-bs-toggle="modal" data-bs-target="#id_modal">
    Le texte
  </span>
</span>

Remarque : Vous pouvez utiliser cette astuce sur des balises <span> ou bien sur d'autres balises HTML.

Une seconde solution pourrait consister à afficher le tooltip et à ouvrir le modal en JavaScript au lieu d'utiliser les dataset.