Introducing New Balloon Module

by Mar 26, 2021Announcements, Pixel Modules

Today we are extremely excited to introduce to you a brand new module added to the Divi Pixel plugin 🥳 🎉

It’s been a while since the last Divi Pixel update. Our team is working hard to bring new features and modules and this time we are happy to add the Balloon module to the Divi Pixel’s modules arsenal. We started working on it early last year. After several months of work, due to increasing problems, mainly with the module operation on tablets and mobile phones, the work was stopped because we decided that it was better to focus on new modules that can be implemented and added to the plugin faster. Of course, this did not mean that the module was abandoned, but it took several months before we returned to it again.

In January this year, we unearthed this module and decided to finally finish it. Even though we thought the module was almost ready and a few small tweaks were only needed, we found out we were wrong. While testing, we found a lot of issues, but we were determined to fix them all and build a module that would allow you to create tooltips easily.

New Modules Every Month
Divi is a great website builder geared with functional modules and options. We can say that building websites with Divi is easy, but to build really unique and interactive website, some basic coding skills might be still required. Divi Pixel enhances Divi’s capabilities and gives users new possibilities and tools for building websites they love. The new Balloon module expands the Divi Pixel toolkit even more. It’s the 29th module added to our extension and more amazing modules and features are coming!

We have updated the Divi Pixel Roadmap page with all coming and planned features and modules, so if you are eager to see what’s coming, check the Plugin Roadmap.

Tooltips Made Easy
Tooltips display informative content when users hover over, focus on, or click an element. It’s a really great feature to enhance our website usability and user experience. The new Divi Pixel Balloon module lets us build tooltips using the Divi Builder and trigger them on any element we want. This new module uses tippy.js library and is a complete solution for popovers and dropdowns. It comes with optimized positioning engine for flipping and overflow prevention.
Balloon Module Overview
The Divi Pixel Balloon module comes with all necessary settings for building responsive tooltips and triggering them on our Divi websites with ease. This module gives full control over the tooltips. We can build amazing designs and easily display them on hover, focus, or click. The built-in settings even allow us to make the tooltip interactive.

The sky is the limit!

Content Settings

In Content Settings, we can find a few options where we set our tooltip Selector, Placement, Animation, Content Type, and Alignment. We have two options for Content Type: we can select Manual Content or Divi Library Item. If we choose Manual Content, we can then add Icon/Image, Title, Description, and Button and style the tooltip on a page where we have added the module. The Manual Content type should cover most of the use cases.

For more complex tooltips we can choose Divi Library as a Content Type. This allows us to build our tooltip using the Divi Builder by saving the layout/row/module to the Divi Library and by selecting it in Balloon module Content Type settings.

Trigger tooltip on any element you want

To add a tooltip to our page, we need to add the Balloon module and define its Selector. We can use a class like .my-balloon or element ID which would look like #my-balloon. In the next step, we need to add this class/ID to the module/element on our site which will trigger the tooltip.

In the below sample we’ve added Balloon and Button modules to our layout. The Balloon module will display a dummy element that can be customized and will be shown when we hover or click on the element with our Selector. In Balloon Content Settings we need to define our selector, and finally, we need to add this selector to the module where we want to trigger the tooltip. To do that, we need to open the Button module settings, go to the Advanced/CSS ID & Classes field and add our selector to the CSS ID or CSS Class field.

Add Balloon module to your page
Add selector in Balloon module Content Settings
Add selector to the element you want trigger Balloon on
New Improved Documentation
Thanks to your suggestions, we decided to improve the Divi Pixel documentation. We plan to extend it even more in the near future, to help you utilize the Divi Pixel plugin with ease. In this first step, we have improved the user interface. There is a new search function and also topics are nicely grouped. This will help us maintain the docs page in a better and more organized way.

The Divi Pixel Documentation can be accessed from the header menu on this page.

And this is it for now, but we will be back with a new module soon! If you are Divi Pixel user, then enjoy using the new Balloon module. If you are considering purchasing our plugin, then this is the right time! We offer a 14-day money-back guarantee, so joining Divi Pixel is 100% risk-free! Take your designs to the next velev with the Divi Pixel plugin.

Maciej Ekstedt

Maciej Ekstedt

Maciej is the co-founder of Divi Pixel. He is a self-made web designer and marketing expert, and he loves his job so much that he barely leaves the office. He transforms creative ideas into effective strategies for his company. Maciej is fascinated by the phenomenon of a megalopolis. He notices patterns and details which make up the whole thing, and he uses these skills in his work.