Bootstrap Popover is a nifty little tool like a tool tip function that displays more text by clicking on the button.
Underlying code below…
<button type="button" class="brxe-button bricks-button bricks-background-primary btn btn-lg" data-bs-toggle="popover" data-bs-title="Popover title" data-bs-content="And here's some amazing content. It's very engaging. Right?">Click to toggle popover</button>
Regards CSS, you can use the Bootstrap CSS or create your own, above has some theme specific classes added to the button element.
Set up the Javascript files
Get the Bootstrap bundle js or just the popper and boostrap min JS, explained on the Bootstrap site.
Create a popover-init.js file with the content
document.addEventListener("DOMContentLoaded", function () {
var popoverTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="popover"]'));
var popoverList = popoverTriggerList.map(function (popoverTriggerEl) {
return new bootstrap.Popover(popoverTriggerEl);
});
});
Put both js files (Bootstrap Bundle JS and the JS init file) in your js child theme folder.
Enqueue the scripts
Enqueue the scripts in functions.php
add_action('wp_enqueue_scripts', 'popover_scripts');
function popover_scripts() {
// Set Up Bootstrap Bundle JS
wp_enqueue_script( 'bootstrapjs', '//cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js', array(), '5.3.3', true );
// Popover Init JS
wp_enqueue_script( 'popover_init', get_stylesheet_directory_uri() . '/js/popover-init.js', array( 'bootstrapjs'), '1.2.0', true );
Below are 4 Popover buttons with the different Popover text positions and below that is the HTML markup with the Popover attributes…
<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>
