Tooltips are considered to be a good user experience enhancement, which can allow visitors to learn more information about clickable elements like icons, buttons, and links
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>
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 to create that attribute too like in the below 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 attributes you may need to further customize the tooltip animation and delay, etc.
Add tooltip to button
Now you are just one step away from adding these beautiful tooltips in your website elements: fill the values of the attributes, 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.
If you have any comments or need more information on this topic, please post them in the related facebook post
Interested in more posts this?
Join over 200 subscribers of our spam-free mailing list, to get email notifications whenever we publish a new blog post.Get Notifications