Enhance the standard APEX Tooltip with jQuery

In APEX, we are going to add some small enhancements to the standard tooltip attribute by using the jQuery UI tooltip function.

We are not going to use any additional libraries, CSS, etc

The standard tooltip looks like this...

And our enhancement is going to look like this...

As you can see, we have a larger tooltip with theme specific colours.

To do this we add a title attribute to our item. In my case the item is P1_TEXT

Next we are going to add the following to Execute when Page Loads section of the page.

$('#P1_TEXT').tooltip({
  tooltipClass: 'u-hot'
});

It should look like this

You will see that we are adding a tooltipClass of u-hot this means the Universal Theme will add the correct colour and colour contrast of the hot palette to the tooltip.

Instead of the Execute when Page Loads section, you may use a Page Load Dynamic Action with an Exectue JavaScript Code ... its up to you.