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();
Figure 5.12: A sample tooltip positioned using Popper.js; the tooltip appears when hovering over the “tooltip” text
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.
Note: Elements with empty title attributes will not show any tooltip.
Source: Jakobus Benjamin, Marah Jason (2018), Mastering Bootstrap 4: Master the latest version of Bootstrap 4 to build highly customized responsive web apps, Packt Publishing; 2nd Revised edition.