Popovers are used to display additional content when a user hovers over or clicks on an element, and they are similar to tooltips, except that the content contained in them can be much richer. Just as with tooltips, Bootstrap 4 relies on the third-party plugin Popper.js to position popovers.
Similar to tooltips, popover elements are denoted using the data-toggle
attribute set to popover
. The title
attribute is used to denote the popover's title, while the data-content
attribute should point to its content: top
, bottom
, left
, and right
:
<a href="#" data-toggle="popover" title="My popover title" data-content="My popover content"> Click me </a>
As there is some overhead involved in initializing the popovers, Bootstrap does not initialize them automatically. As such, we must do so ourselves:
$('[data-toggle="popover"]').popover()
Figure 5.13: A sample popover created using Popper.js and Bootstrap 4; the popover appears when the "Click me" link is pressed
Using...