Use an input helper to display additional information about a form element. The text label will appear once a user hovers over the helper.
{% capture code %}
<spanclass="form-help"data-bs-toggle="popover"data-placement="top"data-content="<p>ZIP Code must be US or CDN format. You can use an extended ZIP+4 code to determine address more accurately.</p><p class='mb-0'><a href=''>USP ZIP codes lookup tools</a></p>">?</span>
<spanclass="form-help"data-bs-toggle="popover"data-bs-placement="top"data-content="<p>ZIP Code must be US or CDN format. You can use an extended ZIP+4 code to determine address more accurately.</p><p class='mb-0'><a href=''>USP ZIP codes lookup tools</a></p>">?</span>
Use the default markup to create tooltips that will help users understand particular elements of your interface. You can decide where the text label is to be displayed - at the top, bottom or on either side of the element.
{% capture code %}
<buttontype="button"class="btn"data-bs-toggle="tooltip"data-placement="top"title="Tooltip on top">
<buttontype="button"class="btn"data-bs-toggle="tooltip"data-bs-placement="top"title="Tooltip on top">
Tooltip on top
</button>
<buttontype="button"class="btn"data-bs-toggle="tooltip"data-placement="right"title="Tooltip on right">
<buttontype="button"class="btn"data-bs-toggle="tooltip"data-bs-placement="right"title="Tooltip on right">
Tooltip on right
</button>
<buttontype="button"class="btn"data-bs-toggle="tooltip"data-placement="bottom"title="Tooltip on bottom">
<buttontype="button"class="btn"data-bs-toggle="tooltip"data-bs-placement="bottom"title="Tooltip on bottom">
Tooltip on bottom
</button>
<buttontype="button"class="btn"data-bs-toggle="tooltip"data-placement="left"title="Tooltip on left">
<buttontype="button"class="btn"data-bs-toggle="tooltip"data-bs-placement="left"title="Tooltip on left">
data-content="<p>ZIP Code must be US or CDN format. You can use an extended ZIP+4 code to determine address more accurately.</p><p class='mb-0'><a href='#'>USP ZIP codes lookup tools</a></p>"