Ces deux composants s’appuient sur le JavaScript et nous allons devoir les initialiser en utilisant du jQuery.
Les boites d’aide ou tooltips
Les boites d’aide sont des boites de texte qui apparaissent lorsqu’un utilisateur passe sa souris sur un élément ;
Pour créer une boite d’aide, on ajoutera un attribut data-toggle="tooltip" à un élément. On va utiliser un attribut title pour préciser le texte de notre boite d’aide.
On va également pouvoir choisir si la boite d’aide doit apparaitre au-dessus, en dessous, à droite ou à gauche de l’élément en précisant un attribut data-placement et en lui passant l’une de valeurs top | right | bottom | left.
Pour initialiser les boites d’aide, on va devoir sélectionner les éléments portant les boites et appeler la méthode toooltip() avec jQuery.
See the Pen
Bootstrap 5.2.1 by Pierre (@pierregiraud)
on CodePen.
Les popovers
Les popovers sont similaires aux boites d’aides de type tooltip à l’exception que l’utilisateur devra cliquer sur l’élément pour qu’un popover apparaisse et qu’un popover peut contenir davantage de texte et va être plus structuré qu’un tooltip.
Pour créer un popover, on va ajouter un attribut data-toggle="popover" à un élément. On va ensuite utiliser un attribut title pour préciser le titre de notre popover et un attribut data-content pour le corps du popvover.
De la même façon que pour des tooltips, on pouvoir choisir si le popover doit apparaitre au-dessus, en dessous, à droite ou à gauche de l’élément en précisant un attribut data-placement et en lui passant l’une de valeurs top | right | bottom | left.
On va également devoir utiliser jQuery pour initialiser les popovers en sélectionnant l’élément portant le popover et en appelant la méthode popover().
See the Pen
Bootstrap 5.2.2 by Pierre (@pierregiraud)
on CodePen.
