Comment créer des info-bulles Bootstrap 5 ?

1. Inclure Bootstrap :

- Assurez-vous d'inclure les fichiers Bootstrap CSS et JavaScript dans votre code HTML. Assurez-vous que vos fichiers JavaScript sont placés juste avant le ` `balise.

2. Structure HTML :

- Ajoutez l'élément auquel vous souhaitez attacher une info-bulle.

- Enveloppez le texte ou l'élément, tel qu'un bouton, avec une balise d'ancrage `` avec des attributs HTML spécifiques.

- À l'intérieur de la balise ``, incluez un attribut `title` qui spécifie le contenu de l'info-bulle.

```html

Survole moi

```

3. Initialisation JavaScript :

- Initialisez les info-bulles à l'aide de JavaScript en incluant la ligne suivante :

```javascript

var tooltipTriggerList =document.querySelectorAll('[data-bs-toggle="tooltip"]');

var tooltipList =[...tooltipTriggerList].map(tooltipTriggerEl => new bootstrap.Tooltip(tooltipTriggerEl));

```

4. Ajouter une configuration supplémentaire :

- Spécifiez l'emplacement de l'info-bulle en modifiant l'attribut data-placement sur la balise ``, par ex. `data-placement="top"` pour l'info-bulle au-dessus de l'élément ou `data-placement="bottom"`.