Skip to Content

How to Add Pop-Up Info Boxes to Your Website

While pictures are worth a thousand words, those words might not be enough on your website to explain a particular topic relevant to your website.

Your content team can sometimes find that more information is needed on an image element to improve clarity about your website's topic. 

This is where pop-ups come in handy. Pop-up elements indicate to your web visitors the presence of more information. Unlike other content elements, pop-ups are only triggered by users. This gives them the freedom to read or hide whatever information they'd like to see. Pop-up boxes also boost UX and engagement with your website -- offering your visitors more opportunity to click around and explore more. 

Here's how to add these helpful pop-up boxes to your website: 


The HTML uses Bootstrap 4's popper.js data attributes .


The CSS here styles and positions the buttons and the popups.


The JS simply initializes the popover and uses it's options to allow it to close on click.

Want to see how it all looks before committing to its use? Check out the JSFiddle below. Hover over the background images to see the hover effect. Be sure to scale your browser windows to various sizes to see how these sections would look on mobile display.

Scott Madara
Contributions Editor here at Solodev. Want to be featured on the Solodev Blog? Get in touch.
Follow me on Twitter

Sign up to explore

Create an account in seconds and start building today.

Sign up for Solodev
Solodev Logo

©2024 Solodev. All rights reserved worldwide.