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
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 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.