Create On-Page Speech Bubbles with Popper.js

By Jake Rocheleau. in Toolkit. Updated on November 24, 2017.

Everyone knows about tooltips and there are dozens of free resources to help you make them. However, custom message bubbles or “poppers” are also very useful.

They aren’t limited to hover events, so they can appear on the page consistently and work around other user behaviors.

If you’re looking to create these speech bubble poppers on your site then Popper.js is the best choice. It’s a free open-source plugin, hosted on the official js.org website.

You’ll find these bubble tips in a lot of websites that have complex interfaces. Sometimes they’ll offer quick tips, walkthroughs, and onboarding advice for people new to the interface.

With Popper.js, you don’t need to wait for the user to hover just to create a tooltip. Instead, you can force a popper to appear anywhere, any size, any color, with dynamic positioning.

Check out the Popper.js demo page to see what I mean. It comes with a wide array of positioning features that let you auto-flip the popper position based on the screen location.

As the user scrolls down the page, they might lose the popper bubble. With this plugin, you can force it back into view by flipping it up (or down), depending on the user’s scroll direction.

You have full control over the boundaries, the arrow positions, the tooltip colors, and so much more. Not to mention this plugin is gorgeous and fully extensible if you want to add your own features into the mix.

All of the source code is available for free on GitHub if you wanna check it out.

To get started, take a look at the documentation page for a full guide. This tells you which scripts you’ll need, how to set up a custom popper, and how to configure the different viewport options. Although, the best resource is the main Popper.js page, with demos galore and plenty of code samples.

If you want to read more about development check out this blog post written by the creator Federico Zivolo.