Comment avoir plusieurs data-bs-toggle avec Bootstrap 5 ?
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 ?
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.