A Popup That Shows Up When Clicked – Bootstrap Popover

We have covered Bootstrap tooltips in our previous lesson. You will now get to know a tool that is very similar in function but a bit different in the way it performs: a Bootstrap popover.

A popover is a type of popup: it is not seen on the page constantly. This small element of information is applied to a parent element and will only be shown in case it is clicked (whereas for a tooltip, hovering was enough).

Using popovers might be a better choice when you need to add a lot of popups on one page: using tooltips could cause the user to display popups unwillingly by merely moving their cursor around the page. Creating a Bootstrap popover is very simple and similar to creating a tooltip. We will take you through every step of the process.

Bootstrap Popover: Main Tips

• Using Bootstrap 4, you can create popovers.
• A Bootstrap 4 popover is a small popup element that appears after clicking an element.

Creating Popovers

Creating a Bootstrap popover example is simple. All you need to do is add two attributes:

• data-toggle with the value of popover
• data-content with the value that defines what appears inside the popover

The title attribute sets the content of the header of the popover.

Check out this simple example of a popover Bootstrap component applied to a button:

<button data-toggle="popover" title="I am a popover" data-content="This is my content" class="btn btn-success" type="button">Popover element</button>

To enable Bootstrap popovers, you must use this jQuery code inside the <script> tags:

$(document).ready(function(){
    $('[data-toggle="popover"]').popover(); 
});

Modifying Position

Just like tooltips, popovers can be modified to appear to the right, left, top, or under the element they're assigned to. To achieve this, you should using the data-placement attribute. See the Bootstrap popover examples below to see the difference:

<button title="I am a popover" data-content="This popover appears on the top" data-toggle="popover" class="btn btn-success" type="button" data-placement="top">Popover element</button>
<button title="I am a popover" data-content="This popover appears on the right" data-toggle="popover" class="btn btn-success" type="button" data-placement="right">Popover element</button>
<button title="I am a popover" data-content="This popover appears on underneath" data-toggle="popover" class="btn btn-success" type="button" data-placement="bottom">Popover element</button>
<button title="I am a popover" data-content="This popover appears on the left" data-toggle="popover" class="btn btn-success" type="button" data-placement="left">Popover element</button>

Pros

• Easy to use with a learn-by-doing approach
• Offers quality content
• Gamified in-browser coding experience
• The price matches the quality
• Suitable for learners ranging from beginner to advanced

Main Features

• Free certificates of completion
• Focused on data science skills
• Flexible learning timetable

GET 25% OFF

Pros

• Simplistic design (no unnecessary information)
• High-quality courses (even the free ones)
• Variety of features

Main Features

• Nanodegree programs
• Suitable for enterprises
• Paid Certificates of completion

UP TO 70% OFF

Pros

• A wide range of learning programs
• University-level courses
• Easy to navigate
• Verified certificates
• Free learning track available

Main Features

• University-level courses
• Suitable for enterprises
• Verified certificates of completion

FREE COURSES

Closing Popovers

Normally, a Bootstrap popover would only close when the element that toggles it to appear is clicked again. However, by applying data-trigger="focus" to the element with the popover, you can make it so the popover is closed if you click outside the element as well:

<!-- popover that can be closed by clicking outside of it -->
<a tabindex="0" title="I am a popover" data-content="You can close me by clicking anywhere" data-toggle="popover" class="btn btn-success" role="button" data-trigger="focus">Popover element</a>

Bootstrap Hover Popovers

You can also apply the value hover instead of focus to make the popover appear when you hover over the element:

<!-- popover that is displayed on hover -->
<button title="I am a popover" data-content="I am displayed once you hover over the button" data-toggle="popover" class="btn btn-success" type="button" data-trigger="hover">Popover toggle by hover</button>

Bootstrap Popover: Summary

• You can create little Bootstrap popups called popovers.
• Usually, popovers appear after clicking an element, but you can also make Bootstrap hover popovers that get activating by simply hovering over them.