Tooltips are short pieces of text that are displayed over an element when the user hovers over it. Typically, tooltips are used to provide additional information that is not critical enough to warrant static real estate on a part of the page.

Tooltips in Bootstrap 4 are powered using the Popper.js third-party library, which we already installed in Chapter 1, Revving up Bootstrap. To denote a popover element, use the data-toggle attribute and set it to tooltip. The title attribute is used to denote the tooltip's content:

This is a sample text with a <span data-toggle="tooltip" title="My sample tooltip">tooltip</span>.

As there is some overhead involved in initializing the tooltips, Bootstrap does not initialize them automatically. As such, we must do so ourselves:

$('[data-toggle="tooltip"]').tooltip();

Note that the position of the tooltip can be specified using the data-placement attribute and by providing one of the top, bottom, right and left values.