Bootstrap - Popovers: A Beginner's Guide

Hello there, aspiring web developers! Today, we're going to dive into the wonderful world of Bootstrap Popovers. Don't worry if you're new to this; I'll guide you through each step with the same patience I've used in my classroom for years. By the end of this tutorial, you'll be popping popovers like a pro!

Bootstrap - Popovers

What are Popovers?

Before we jump in, let's understand what popovers are. Imagine you're reading a book, and there's a little asterisk next to a word. When you look at the bottom of the page, you find extra information about that word. That's essentially what a popover does on a webpage – it provides additional information when a user interacts with an element.

Enable Popovers

First things first, we need to enable popovers. It's like turning on the light before you start reading – you need to set things up before you can use them.

To enable popovers, you need to include Bootstrap's JavaScript and CSS files in your HTML document. Here's how you do it:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Bootstrap Popovers</title>
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
    <!-- Your content goes here -->
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
    <script>
        var popoverTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="popover"]'))
        var popoverList = popoverTriggerList.map(function (popoverTriggerEl) {
            return new bootstrap.Popover(popoverTriggerEl)
        })
    </script>
</body>
</html>

This code sets up the basic structure of an HTML document and includes Bootstrap's CSS and JavaScript files. The script at the bottom initializes all popovers on the page.

Creating a Popover

Now that we've set the stage, let's create our first popover! It's as simple as adding a few attributes to a button.

<button type="button" class="btn btn-lg btn-danger" data-bs-toggle="popover" title="Popover title" data-bs-content="And here's some amazing content. It's very engaging. Right?">Click to toggle popover</button>

Let's break this down:

class="btn btn-lg btn-danger": This makes our button large and red.
data-bs-toggle="popover": This tells Bootstrap that this element should trigger a popover.
title="Popover title": This sets the title of our popover.
data-bs-content="...": This is the main content of our popover.

Positioning of a Popover

Just like arranging furniture in a room, you can position your popover in different ways. Bootstrap allows you to place popovers on the top, right, bottom, or left of an element.

<button type="button" class="btn btn-secondary" data-bs-container="body" data-bs-toggle="popover" data-bs-placement="top" data-bs-content="Top popover">
  Popover on top
</button>

<button type="button" class="btn btn-secondary" data-bs-container="body" data-bs-toggle="popover" data-bs-placement="right" data-bs-content="Right popover">
  Popover on right
</button>

<button type="button" class="btn btn-secondary" data-bs-container="body" data-bs-toggle="popover" data-bs-placement="bottom" data-bs-content="Bottom popover">
  Popover on bottom
</button>

<button type="button" class="btn btn-secondary" data-bs-container="body" data-bs-toggle="popover" data-bs-placement="left" data-bs-content="Left popover">
  Popover on left
</button>

The data-bs-placement attribute determines where the popover appears relative to the button.

Custom popovers

Want to add a personal touch to your popovers? You can customize them with your own HTML content!

<button type="button" class="btn btn-lg btn-danger" data-bs-toggle="popover" data-bs-html="true" title="<h3>Custom Title</h3>" data-bs-content="<b>Bold</b> content. <a href='#'>Link</a> included.">
  Custom HTML Popover
</button>

Here, we've set data-bs-html="true" to allow HTML in our popover content. Now we can use HTML tags in our title and content!

Dismissible Popover

Sometimes, you want your popover to stick around until the user explicitly closes it. That's where dismissible popovers come in handy.

<a tabindex="0" class="btn btn-lg btn-danger" role="button" data-bs-toggle="popover" data-bs-trigger="focus" title="Dismissible popover" data-bs-content="And here's some amazing content. It's very engaging. Right?">Dismissible popover</a>

The key here is data-bs-trigger="focus". This means the popover will stay open until the user clicks somewhere else on the page.

Hovering of a Popover

Want your popover to appear when the user hovers over an element? Easy peasy!

<button type="button" class="btn btn-secondary" data-bs-container="body" data-bs-toggle="popover" data-bs-trigger="hover" data-bs-placement="top" data-bs-content="Hover over me!">
  Hover to trigger popover
</button>

The data-bs-trigger="hover" attribute makes the popover appear on hover.

Popover on disabled elements

Normally, disabled elements don't trigger user interactions. But with a little trick, we can make popovers work on them too!

<span class="d-inline-block" tabindex="0" data-bs-toggle="popover" data-bs-trigger="hover focus" data-bs-content="Disabled popover">
  <button class="btn btn-primary" type="button" disabled>Disabled button</button>
</span>

We wrap our disabled button in a <span> that handles the popover triggering.

Options

Bootstrap provides a variety of options to customize your popovers. Here's a table of some common options:

Option	Type	Default	Description
animation	boolean	true	Apply a CSS fade transition to the popover
container	string \| element \| false	false	Appends the popover to a specific element
content	string \| element \| function	''	Default content value if `data-bs-content` attribute isn't present
delay	number \| object	0	Delay showing and hiding the popover (ms)
html	boolean	false	Allow HTML in the popover
placement	string \| function	'right'	How to position the popover
selector	string \| false	false	If a selector is provided, popover objects will be delegated to the specified targets
template	string	`<div class="popover" role="tooltip"><div class="popover-arrow"></div><h3 class="popover-header"></h3><div class="popover-body"></div></div>`	Base HTML to use when creating the popover
title	string \| element \| function	''	Default title value if `title` attribute isn't present
trigger	string	'click'	How popover is triggered - click \| hover \| focus \| manual

You can use these options when initializing popovers with JavaScript:

var popover = new bootstrap.Popover(document.querySelector('#example'), {
  trigger: 'hover',
  placement: 'top'
})

And there you have it! You're now a Bootstrap Popover pro. Remember, the key to mastering this (and any coding concept) is practice. So go ahead, play around with these examples, mix and match, and create something awesome. Happy coding!

Credits: Image by storyset

Previous Tutorial:

Bootstrap - Placeholders

Next Tutorial:

Bootstrap - Progress