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...