par anonyme 21-Janvier-2023

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 ?

1 Réponse

par Antoine 21-Janvier-2023

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.

Bienvenue sur 1FORMATIK, où vous pouvez poser des questions en lien avec l'informatique et internet, et recevoir des réponses d'Antoine et d'autres internautes.

2.6k questions

3k réponses

...