In this tutorial, I will show you how you can display tooltips on page items, buttons, etc on mouseover in Oracle Apex.
I am using the Tippy.js JavaScript library to show tooltips in Oracle Apex. This library has good customization features and is easy to use.
Display Tooltips in Oracle Apex Example
To use the Tippy.js library, you need to add the following scripts to the page or add it to the application static files.
<script src="https://unpkg.com/@popperjs/core@2"></script><script src="https://unpkg.com/tippy.js@6"></script>To add the above script, open your page then in the property palette paste these scripts in the HTML Header section.
Or go to Shared Components > Static Application files and add these scripts.
Now your page is ready to use the Tippy.js functions.
To display the tooltip for a page item (P1_NAME), add the following JavaScript code to your page's Function and Global Variable Declaration section:
tippy('#P1_NAME', {
content: 'Enter your name.',
});Save and run the page you will see the tooltip on mouseover as shown in the below image:
Similarly, you can show the tooltip on buttons and any other items, regions, etc. But for other objects, you need to specify the static id and that static id will be used in JavaScript code to display the tooltip for that item.
Below is an example to add the tooltip for a button.
Add a static id to the button, for example, mybutton and then add the following JS code to the Function and Global variable declaration section.
tippy('#mybutton', {
content: 'My tooltip!',
});You can further customize the tooltip to display below or right side, etc. Check the documentation for it.
