Learning Bootstrap 4 - Second Edition

Using Popover components

Popover components are similar to Tooltips but allow for more content to be included. Popovers are also revealed on a click action, not a hover action like Tooltips. Let's take a look at the basic code to render a Popover. First, let's make sure we add this Popover to our project, so open up index.ejs again and find another filler line of code to add this new component. When you do, enter the following code into the template:

<p><a id="popover-link" data-toggle="popover" data-content="This is the content of my popover which can be longer than a tooltip">This is a popover</a>. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, ...