Adding a tooltip component to a form label

Now we will add a tooltip component to a form label in the checkout flow on the Cart page to provide the user with some helpful contextual information triggered on mouse hover (or tap on a touch device). We will add this tooltip component to an icon placed next to the label for the input of the security code for a credit card found in the form in the Payment Options tab pane.

The first thing we need to do is to add the proper markup. After the label text, we will add a .bi-question-circle icon colored with .text-info, and then put the required attributes for our tooltip component into that icon. Our markup will be updated in the following way:

part-2/chapter-9/website/cart.html

// Original code
<label class="form-label d-flex justify-content-between" for="securityCode">Security code:</label>
// Updated code
<label class="form-label d-flex justify-content-between" for="securityCode...