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-left">
                        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-toggle="tooltip"
data-placement="top" class="tt-link" title="Tooltip on top">Tooltip Item</a> with desktop publishing software like Aldus PageMaker
                        including versions of Lorem Ipsum. </p>