O'Reilly logo

Bootstrap 4 – Responsive Web Design by Jason Marah, Benjamin Jakobus, Matt Lambert, Silvio Moreto

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

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, ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required