Oracle APEX – Dynamic tooltip using tippy.js

Further to my previous blog about “Low Code Implementation of Tooltip” was implemented for all the Static tooltip content – where we already know the tooltip content during page loading. This tooltip content – we set on Title attribute of your tag.

Purpose of this blog is to extend the tippy.js tooltip implementation using AJAX (dynamic) to fetch your tooltip content dynamically. Find more details about AJAX requests documentation by tippy.js here.

Let’s try to understand how we will implement this dynamic (AJAX) tooltip in Oracle APEX application. We will also make sure that we make this implementation Generic and Reusable. We will also implement this on best possible method and available component of Oracle APEX.

Let’s get started now.

Add following JS/CSS reference files to your application definition such that it will be available globally.

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

CSS
===
tippy.css

Let’s write and understand dynamic tooltip JS function.

function initializeDynamicTooltip(){
    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.ajax-tippy',
			content: "Loading...",
			onShow(instance) {
				tippy.hideAll();
				instance.reference.removeAttribute('title');

				apex.server.process("GET_TIPPY_TOOLTIP", {
					x01: instance.reference.getAttribute('ref_id'), /*This will read ref_id attribute value of your HTML tag*/
					x02: instance.reference.getAttribute('ref_type') /*This will read ref_type attribute value of your HTML tag*/
				}, {
					dataType: 'text',
					success: function(pData) {
						instance.setContent(pData);
						instance.reference.removeAttribute('title');
					},
					error: function( jqXHR, textStatus, errorThrown ) {
						// handle error
					}
				});
			},
			allowHTML: true,
			animateFill: false,
			delay: 500,
			duration: [200, 0],
			theme: (vTheme == 'DARK') ? 'light' : 'material',
			followCursor: true
		});
	}
}

Additionally, we need to create new Application Process (GET_TIPPY_TOOLTIP) as below.

declare
    l_ref_id number;
    l_ref_type varchar2(100);
    l_return clob;
begin
    l_ref_id := apex_application.g_x01;
    l_ref_type := apex_application.g_x02;
    if l_ref_type = 'EMP_TITLE' then
        begin
            SELECT JOB_TITLE
              into l_return
              from EMP
             where EMP_ID = l_id;
        exception
            when no_data_found then
                null;
        end;
    elsif l_ref_type = 'DEPT_NAME' then
        begin
            SELECT DEPT_NAME
              into l_return
              from DEPT
             where DEPT_ID = l_id;
        exception
            when no_data_found then
                null;
        end;
    end if;
    htp.p(l_return);
exception 
    when others then 
        null;
end;

Hope that helps!

Regards,
Jaydip Bosamiya
jbosamiya@gmail.com