The popper.js library is a powerful positioning engine for tooltips and popovers. Today, we are honing in on how to make a popover. You can think of a popover as a tooltip that can contain more content. What makes Popper so effective is its ability to generate popovers that maintain an optimal position on the page when its location or the browser viewport changes. This can be a simple and effective UX and UI solution for web developers. That’s probably why it is integrated with other popular libraries like Boostrap and Material UI.
In this tutorial, we are going to harness the power of Popper.js in Divi to create a dynamically positioned popover when clicking a button. This will allow anyone to create a popover using Divi elements to display any content they want when clicking a button. Plus, the popover content will automatically adjust its position to preserve the most ideal visibility as the user interacts with your page.
Here is an illustration of the positioning of these popovers…
Let’s get started!
Here is a quick look at the example popover menu we will design in this tutorial.
Notice how the position of the popover changes dynamically as the user scrolls or changes the browser size.
If you click the button while it is at the very top of the browser viewport, the popover will be displayed below the button, and if you click the button while it is at the very bottom of the viewport, the popover will be displayed above the button. And if the popover is originally positioned to the right of the button on large viewports, it will flip to a top or bottom position on smaller viewports.
Also don’t miss the little arrow that is also positioned to dynamically point to its reference (or in this case, the button).
Download the Layout for FREE
To lay your hands on the popover example layout from this tutorial, you will first need to download it using the button below. To gain access to the download you will need to subscribe to our Divi Daily email list by using the form below. As a new subscriber, you will receive even more Divi goodness and a free Divi Layout pack every Monday! If you’re already on the list, simply enter your email address below and click download. You will not be “resubscribed” or receive extra emails.
Join the Divi Newsletter and we will email you a copy of the ultimate Divi Landing Page Layout Pack, plus tons of other amazing and free Divi resources, tips and tricks. Follow along and you will be a Divi master in no time. If you are already subscribed simply type in your email address below and click download to access the layout pack.
You have successfully subscribed. Please check your email address to confirm your subscription and get access to free weekly Divi layout packs!
To import the section layout to your Divi Library, navigate to the Divi Library.
Click the Import button.
In the portability popup, select the import tab and choose the download file from your computer.
Then click the import button.
Once done, the section layout will be available in the Divi Builder.
Let’s get to the tutorial, shall we?
What You Need to Get Started
To get started, you will need to do the following:
After that, you will have a blank canvas to start designing in Divi.
Creating a Popover with Popper.js and Divi
As previously mentioned, we are going to use popper.js in Divi to create a dynamically positioned popover (the pop-up box) that is revealed when clicking on the popover’s reference (the button). With Divi, we can build these two (the pop-up box and the button) using the Divi builder. Then later we are going to add the code necessary to marry the two in perfect position harmony.
we are going to designate a row as the popper (the thing that popups up when clicking the button). Then we can add modules to the row to include the content we want to show in the popper popover. In this example
To begin, let’s go ahead and add a custom CSS ID to the regular section that is ready by default. Open the section settings and add the following ID:
Create Popper Popover with Divi Row
Next, add a one-column row to the section. This row will become our Popper popover element that pops up when clicking a button.
Open the row settings and update the styling as follows:
Because this row will become our popper popover element, we need to add a CSS ID to serve as a selector in our code. We also need to make sure the visibility remains on overflow (it is hidden by the rounded corners).
Go to the advanced tab and update the following:
Add Content to Popover Row
Here is where the power of Divi shines. We can add any module(s) we want to our row to fill the popover with whatever content we want using the Divi Builder to design them. For this example, we are going to add some buttons to the row to serve as a custom menu that appears within the popover.
To start, add a button module to the column of the row.
Now let’s add some styling to our button real quick. Update the button settings as follows:
NOTE: We need to use margin on the modules to create spacing instead of relying on row (or column) padding because we will be adding an arrow (using a divider) that needs to be positioned on the edge of the row (with absolute position). Any row or column padding will push the arrow away from the edge.
Next, add the following custom CSS snippet to the Main Element to make the button span the full width of the column/row:
Now duplicate the button two (or more) times to add a few more buttons to our menu popover.
Creating the Popover Arrow
Popper.js has built-in support for positioning an arrow along with the popover. To build the arrow, add a new divider under the last button in our row.
In the divider settings, select not to show the divider.
Then, under the advanced tab, add the following CSS ID:
We’ll be using custom external CSS to style and position the arrow later.
Creating the Popover Button (or Reference)
The two key elements of a popper popover include the popover element (or popper) and the reference that the popover attaches itself to. You can use any Divi element as a reference that generates the popover, but for this example, we are going to use a button.
Create Popper Reference Button
Before we create our button, we need to add a new one-column row under our popover row.
Then add a new button module to the row.
Update the button settings with some basic styling as follows:
Next, add the necessary CSS ID that will allow us to target and use the button as our popover reference later:
Now that our popover and button are complete, we are ready to add the code to make the magic happen.
To do this, add a code module under the reference button module in the second row.
It is important that the code is at the bottom of the page for it to work.
First, we’ll add the CSS.
In the code content box, add the style tags that are needed to wrap CSS in HTML. Then copy and paste the following CSS between the style tags:
Next, we need to access the popper.js library by adding a script that imports Popper.js from their CDN (https://unpkg.com/@popperjs/[email protected]). Under the ending style tag, paste the following script in the code box.
Use the following src within a script tag to import the library:
It should look like this:
That’s it! We are all done. But before we check out the final result, let’s take a closer look at the code being used.
About the Code
If you are interested in how this code works, here is a quick overview.
First, you must import popper.js with their CDN.
Then, we need to add some variables that will be used to target 4 key selectors including the popper popover element (#popper-popup), the popper reference/button (#popper-button), the popper arrow that points to the reference/button (#popper-arrow), and the popper popover boundary to keep the popover from overflowing outside the viewport as long as possible (#popper-section).
Next, we let the variable popperInstance = null to help keep the popperInstance from running until we need it.
Next, we create a Popper instance which will basically create the popper popover using a few modifiers that control how the popover will adjust its placement on the page.
Next, we create 4 functions to destroy the popper instance when not active, show the popper when active, hide the popper when not active, and toggle the show or hide functions when popper has the attribute show-popper.
Finally, we toggle the execution of the popper on click by running the togglePopper() function when clicking the reference/button.
The most essential CSS needed for the popover includes the snippets that hide and show the popper.
After that, the rest of the CSS is used to style and position the small popup arrow.
Here is the CSS that builds the arrow out of the Divi Divider.
And here is the CSS that uses Popper’s built in data-popper-placement attribute to customize the position of the arrow at all four possible positions and then hides the arrow using the data-popper-reference-hidden attribute.
Final CSS and JS
And here is another look at the final CSS and JS code:
Viewing the Final Result
To view the result of this example, we need to create some scrolling space to test out the positioning magic of the popper popover.
To do this, open the section settings and add some margin as follows:
Here is what the functionality looks like on a larger desktop viewport.
Here is what the functionality looks like when adjusting the browser width.
Notice how the position of the popover (and arrow) changes dynamically as the user scrolls or changes the browser size.
I look forward to hearing from you in the comments.
This content was originally published here.