How Add Tooltips to Elements in Oxygen Builder

Tooltips are considered to be a good user experience enhancement, which can allow the visitors to learn more information about clickable elements like icons, buttons and links

To show tooltips on html elements, you need to use Javascript libraries that handle the display and positioning of these tooltips relative to the target button or link. There is quite a large number of choices out there like Tippy and Popper, these libraries require some initialization, either using a custom Javascript code or using html5 data-attributes which is the most intuitive solution.

That's easy to do if you are creating html template or custom WordPress themes, But to do so in Oxygen, there is no built in solution for this, fortunately we have developed our own attributes manager for this website builder which allow you to manage different tooltip content and settings for each element on your website with writing custom code!

Load the required libraries

I have chosen to use Tippy.js to handle all the magic of this guide, so first of all, you need to add a code block to your page or template and put the following html code in the PHP & HTML section:

<script src="//cdnjs.cloudflare.com/ajax/libs/popper.js/1.15.0/popper.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/tippy.js/3.4.1/tippy.min.js"></script>

That's it! no need to call any Javascript function to show the tooltips, we just need to add custom attributes to our target components, let's do it now!

Add attributes to Oxygen

First, Tippy.js require only attribute which is data-tippy which should contain the tooltip text and we will register it for all the required elements using the Oxygen Attributes plugin

That attribute will allow you add a tooltip to the top of the element, but Tippy.js also have an optional attribute data-tippy-placement to control the position of the tooltip, if you want you create that attribute too like in the bellow screenshot

Another attribute that is important to add is data-tippy-arrow which control whether to show the tooltip arrow or not, it should have a boolean value true or false, so we can create a checkbox attribute to do the work

That's it for the basic attributes needed by the Tippy library, you can go to their documentation to learn more about extra attribute you may need to further customize the tooltip animation and delay etc.

Add tooltip to button

Now you are just one step away from add these beautiful tooltips in your website elements: fill the attributes values, like in this demo screenshot

The end result should be something like this

This is how easy you can create and manage tooltips in Oxygen using the attributes addon and the cool Tippy.js library, just remember that you can do much more cool things with Oxygen Attributes not just tooltips, the limit is your imagination and creativity.

Want More Updates?

Subscribe to get expert web design and development tutorials straight to your inbox. NO SPAM!