Bootstrap 4 Components


When you hover over a link or a button without clicking it, a small box appears with some text, probably some information regarding the item being hovered upon. This is called a tooltip. Bootstrap allows us to add tooltips to links or buttons.

Tooltips in bootstrap require a third party library called Popper.js for the proper positioning of tooltips. So in order to tooltips to work, you must include popper.min.js before bootstrap.min.js.

Note: download Popper.js in the form of a zip file. Copy and paste popper.min.js into the js folder inside the project folder that you are working on.

So let’s take a look at how tooltips work and their different positioning.

Tooltips won’t work unless initiated. Because tooltips are opt-in and not enabled by default.

To enable tooltips you are going to have to place the following code after the call to jQuery.