Tooltip

A floating label that helps to explain the function of a user interface element. It can be triggered when users hover, tap, or click.

Interactive demo

Example

Tool tips are consistently displayed on top of link items with a downward-pointing arrow. They ought to appear on a black background with white text. Tooltips will have a dashed bottom border, as depicted below.

The tooltip will appear on top while its bottom border becomes solid upon hovering, as demonstrated below.

<p class=" text-start "> Lorem Ipsum is simply dummy text of the printing and <a href="javascript:void(0);" data-bs-toggle="tooltip" data-bs-placement="top" title="Tooltip on top">typesetting industry</a>. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and <a href="javascript:void(0);" data-bs-toggle="tooltip" data-bs-placement="bottom" title="Tooltip on top">typesetting industry</a>scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, <a href="javascript:void(0);" data-bs-toggle="tooltip" data-bs-placement="left" title="Tooltip on top">typesetting industry</a>remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently <a href="javascript:void(0);" data-bs-toggle="tooltip" data-bs-placement="right" title="Tooltip on top">typesetting industry</a>with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. </p>