Bootstrap 4 Components

Popovers

The popover component allows you to create small overlay content or a pop-up box similar to tooltips that appear when you click on an element.

Popovers 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

Popovers are not enabled by default. So you must initialize them before you can use them.

Example for popovers with all four directions.

Popover on top Popover on right Popover on bottom Popover on left <button type="button" class="btn btn-secondary" data-container="body" data-toggle="popover" data-placement="top" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus."> Popover on top </button> <button type="button" class="btn btn-secondary" data-container="body" data-toggle="popover" data-placement="right" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus."> Popover on right </button> <button type="button" class="btn btn-secondary" data-container="body" data-toggle="popover" data-placement="bottom" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus."> Popover on bottom </button> <button type="button" class="btn btn-secondary" data-container="body" data-toggle="popover" data-placement="left" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus."> Popover on left </button>