Welcome to The Coding College! In this guide, we’ll discuss the Bootstrap 4 JavaScript Popover component, a great way to show additional information when users interact with an element. Popovers are similar to tooltips but more robust, as they can include titles and HTML content.
What Is a Popover?
A popover is a small overlay box that appears when a user clicks or hovers over an element. It can display more detailed content than a tooltip, including titles, images, and formatted text.
1. Setting Up Bootstrap Popovers
To use popovers, you must include the following dependencies:
- Bootstrap CSS
- Bootstrap JavaScript
- jQuery
- Popper.js (required for positioning)
Make sure these are loaded in your project.
Example Setup:
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<!-- jQuery and Popper.js -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.1/umd/popper.min.js"></script>
<!-- Bootstrap JS -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>2. Basic Popover
Popovers require the data-toggle="popover" attribute and can be initialized via JavaScript.
Example:
<!-- Trigger Button -->
<button type="button" class="btn btn-primary" data-toggle="popover" data-content="This is a basic popover!">
Click for Popover
</button>
<!-- Initialize Popovers -->
<script>
$(function () {
$('[data-toggle="popover"]').popover();
});
</script>When you click the button, a popover will appear with the message “This is a basic popover!”
3. Popovers with Titles
You can add a title to a popover using the title attribute.
Example:
<!-- Trigger Button -->
<button type="button" class="btn btn-info" data-toggle="popover" title="Popover Title" data-content="This is a popover with a title!">
Popover with Title
</button>
<!-- Initialize Popovers -->
<script>
$(function () {
$('[data-toggle="popover"]').popover();
});
</script>4. Popovers with HTML Content
Popovers can display HTML content by setting the data-html="true" attribute.
Example:
<!-- Trigger Button -->
<button type="button" class="btn btn-success" data-toggle="popover" data-html="true" title="<strong>HTML Title</strong>" data-content="This <em>popover</em> supports <u>HTML</u>!">
HTML Popover
</button>
<!-- Initialize Popovers -->
<script>
$(function () {
$('[data-toggle="popover"]').popover();
});
</script>5. Popover Placement
You can control the placement of the popover (top, bottom, left, or right) using the data-placement attribute.
Example:
<div class="d-flex justify-content-around">
<button type="button" class="btn btn-danger" data-toggle="popover" data-placement="top" data-content="Popover on top">
Top
</button>
<button type="button" class="btn btn-warning" data-toggle="popover" data-placement="right" data-content="Popover on right">
Right
</button>
<button type="button" class="btn btn-dark" data-toggle="popover" data-placement="bottom" data-content="Popover on bottom">
Bottom
</button>
<button type="button" class="btn btn-secondary" data-toggle="popover" data-placement="left" data-content="Popover on left">
Left
</button>
</div>
<!-- Initialize Popovers -->
<script>
$(function () {
$('[data-toggle="popover"]').popover();
});
</script>6. Programmatic Control of Popovers
Bootstrap provides JavaScript methods to control popovers programmatically.
JavaScript Methods
| Method | Description |
|---|---|
.popover('show') | Shows the popover. |
.popover('hide') | Hides the popover. |
.popover('toggle') | Toggles the popover’s visibility. |
.popover('dispose') | Removes the popover from the element. |
Example:
<button id="showPopover" class="btn btn-primary">Show Popover</button>
<button id="hidePopover" class="btn btn-danger">Hide Popover</button>
<button id="togglePopover" class="btn btn-warning">Toggle Popover</button>
<button type="button" id="programmaticPopover" class="btn btn-info" data-toggle="popover" title="Programmatic Popover" data-content="This popover is controlled programmatically!">
Controlled Popover
</button>
<script>
$(function () {
$('#programmaticPopover').popover();
$('#showPopover').click(function () {
$('#programmaticPopover').popover('show');
});
$('#hidePopover').click(function () {
$('#programmaticPopover').popover('hide');
});
$('#togglePopover').click(function () {
$('#programmaticPopover').popover('toggle');
});
});
</script>7. Popovers on Hover or Focus
You can trigger popovers on hover or focus using the data-trigger attribute.
Example:
<button type="button" class="btn btn-secondary" data-toggle="popover" data-trigger="hover" data-content="This popover appears on hover.">
Hover for Popover
</button>
<button type="button" class="btn btn-dark" data-toggle="popover" data-trigger="focus" data-content="This popover appears on focus.">
Focus for Popover
</button>
<script>
$(function () {
$('[data-toggle="popover"]').popover();
});
</script>8. Popover Events
Bootstrap popovers emit events during their lifecycle, which you can hook into for custom functionality.
| Event | Description |
|---|---|
show.bs.popover | Fired just before the popover is shown. |
shown.bs.popover | Fired after the popover is fully shown. |
hide.bs.popover | Fired just before the popover is hidden. |
hidden.bs.popover | Fired after the popover is fully hidden. |
Example: Listening for Events
<button type="button" id="eventPopover" class="btn btn-primary" data-toggle="popover" data-content="Check the console for events!">
Popover with Events
</button>
<script>
$(function () {
$('#eventPopover').popover();
$('#eventPopover').on('show.bs.popover', function () {
console.log('Popover is about to be shown.');
});
$('#eventPopover').on('hidden.bs.popover', function () {
console.log('Popover is now hidden.');
});
});
</script>9. Best Practices for Popovers
- Don’t Overuse: Popovers should provide supplemental information and not replace essential content.
- Accessibility Matters: Use ARIA attributes like
aria-describedbyto make popovers accessible. - Optimize for Mobile: Ensure popovers are touch-friendly and don’t obstruct content.
- Control Visibility: Prevent overlapping or redundant popovers on a single page.
Conclusion
The Bootstrap 4 JavaScript Popover component is an excellent way to display additional information interactively. With options for titles, HTML content, and programmatic control, popovers are a versatile addition to any website.