Bootstrap 4 – Tooltips

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


NoteElements with empty title attributes will not show any tooltip.

Comments are closed.