Oracle APEX – Low code solution for Tooltip using tippy.js

Purpose of this blog is to integrate external library called tippy.js in Oracle APEX application which is widely used for Tooltip. Oracle APEX by default provides you a standard tooltip when you have “title” tag provided to HTML tags.

While I was exploring tooltip solution, I came across FOS Tooltip plugin which uses same library tipppy.js.

Why this is Low code solution? – We are going to create a very simple JavaScript function to implement tooltip across your APEX application. We are only going to focus on Static tooltips as part of this blog.

Click here to see my new blog on Dynamic tooltip

Add tippy.js library files to application globally. You need following files added to your application’s User Interface page of JavaScript and CSS section.

JavaScript
==========
popper.min.js
tippy-bundle.umd.min.js

CSS
===
tippy.css

Now, let’s try to understand the implementation using JavaScript function.

function initializeTooltip(){
    if(window.screen.availWidth > 768){ // I only want to show tooltip for big screen divices.
        let vTheme = apex.item('P0_SELECTED_THEME').value; // I want to show tooltip style based on my application theme style

        /*Re-initialize FOS splitter tooltips - as it does not work well in multiple language application*/
        var vSel = document.querySelector('button.a-Splitter-thumb');
        if(vSel){
            tippy(vSel);
            var vInst = vSel._tippy;
            vInst.destroy();
        }

        var vSel = document.querySelector('div.a-Splitter-barH');
        if(vSel){
            tippy(vSel);
            var vInst = vSel._tippy;
            vInst.destroy();
        }
        
        tippy.delegate('body', {
            target: 'a[title],button[title]:not(.ui-dialog-titlebar-close),div[title]:not(.a-CardView-badge),span[title]', //I only want to implement tooltips for selected elements
            content(reference) {
                const title = reference.getAttribute('title');
                reference.removeAttribute('title');
                return title;
            },
            allowHTML: true,
            animateFill: false,
            delay: 500,
            duration: [200, 0],
            theme: (vTheme == 'DARK') ? 'light' : 'material',
            followCursor: true,
            onCreate: function(instance){
                //console.log(instance.reference);
                let vReference = instance.reference;
                let vContent = ''+instance.props.content;
                if(vContent.length == 0 || $(vReference).hasClass('t-Form-helpButton') == true || $(vReference).hasClass('gm-ui-hover-effect')){
                    instance.destroy();
                }
            },
            onShow: function(instance){
                tippy.hideAll();
            }
        });
    }
}

You need to call this function globally from application level, or from dynamic action on page 0 load. This should enable tooltip across your application.

Your implementation might be different based on your use case. Purpose here to show you some ways of implementation.

Hope that helps!

Regards,
Jaydip Bosamiya
jbosamiya@gmail.com