Getting your Bootstrap Popover Popper going on in Beaver Theme

May 10, 2020 -

Bootstrap Popover is a nifty little tool like a tool tip function that displays more text like clicking on the button below.

Show me the popover

Set up the javascript files

Careful of the names we are talking about Popovers but we need a Popper JS file….

Get popper.min.js

Create a popover-init.js file with the content

(function($){

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

})(jQuery);

Put both js files 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 Popper JS
   wp_enqueue_script( 'popover_init', get_stylesheet_directory_uri() . '/js/popover-init.js', array( 'jquery'), '1.0.0', true );
   wp_enqueue_script( 'popover', get_stylesheet_directory_uri() . '/js/popper.min.js', array(), '1.0.0', false );
}

Apply…

<button type="button" class="btn btn-secondary" data-container="body" data-toggle="popover" data-placement="top" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
  Popover on top
</button>

<button type="button" class="btn btn-secondary" data-container="body" data-toggle="popover" data-placement="right" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
  Popover on right
</button>

<button type="button" class="btn btn-secondary" data-container="body" data-toggle="popover" data-placement="bottom" data-content="Vivamus
sagittis lacus vel augue laoreet rutrum faucibus.">
  Popover on bottom
</button>

<button type="button" class="btn btn-secondary" data-container="body" data-toggle="popover" data-placement="left" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
  Popover on left
</button>

If you need to pass in HTML tags to the popover, include an additional data attribute below – otherwise the HTML will be rendered front end.