Bootstrap 4 Components

Tooltips

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.

Tooltip on top Tooltip on right Tooltip on bottom Tooltip on left <button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="top" title="Tooltip on top"> Tooltip on top </button> <button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="right" title="Tooltip on right"> Tooltip on right </button> <button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="bottom" title="Tooltip on bottom"> Tooltip on bottom </button> <button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="left" title="Tooltip on left"> Tooltip on left </button>

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.

<script> $(function () {   $('[data-toggle="tooltip"]').tooltip() }) </script>