Skip to Main Content

Add tooltip to Interactive Grid column headers

Here is how you can add tooltip to Interactive Grid column headers. For this I have placed tooltip text to IG column help and add title attribute column headers using small JavaScript code.

First navigate to application shared components and under Other Components click Shortcuts.

Create new Shortcut from scratch. Give name for Scortcut e.g. IG_TOOLTIP_JSON. Change Type to Function Body returning VARCHAR2. Place code to Shortcut and press Create.

declare
  l_json varchar2(32700);
begin
  select json_arrayagg(
    json_object(
      'staticId' value static_id || '_HDR',
      'columnId' value 'C' || column_id || '_HDR',
      'helpText' value help_text
    )
  ) as d
  into l_json
  from apex_appl_page_ig_columns
  where application_id = :APP_ID
    and page_id = :APP_PAGE_ID
    and help_text is not null
  ;
  return l_json;
end;

Then edit your Interactive Grid region and set Static ID for region.

Add JavaScript to page Function and Global Variable Declaration.

(function($){

  $(function(){

    /* 
      MY_IG_REGION is IG region Static ID.
      Change variable value to match IG region static ID
    */
    var regionStaticId = "MY_IG_REGION";

    setIgHeaderHelp(regionStaticId).on("interactivegridviewchange interactivegridreportsettingschange", function(event, ui) {
      setIgHeaderHelp(this.id);
    });

  });

  function setIgHeaderHelp(region){

    var region$ = $($x(region));

    /* IG_TOOLTIP_JSON is Shortcut name */
    $.each("IG_TOOLTIP_JSON", function(i, tooltipData){
      region$.find([$x(tooltipData.columnId), $x(tooltipData.staticId)]).parent("th").attr({"title" : tooltipData.helpText});
    });

    return region$;

  }

})(apex.jQuery);

Remember change variable regionStaticId value to match your IG region Static ID.

For last edit IG columns and add needed text to Help Text field.

See working example

Comments

  • Jari Laine 9 Apr 2025

    Hi Ibrahim,

    You could use APEX_JSON API. I hope this works also on APEX 19.x and 11g database.

    declare
      l_cur   sys_refcursor;
      l_json  clob;
    begin
    
      open l_cur for
        select 
          static_id || '_HDR'         as "staticId"
        , 'C' || column_id || '_HDR'  as "columnId"
        , help_text                   as "helpText"
        from apex_appl_page_ig_columns
        where application_id = :APP_ID
          and page_id = :APP_PAGE_ID
          and help_text is not null
        ;
    
      apex_json.initialize_clob_output(
        p_cache => false
      , p_indent => 0
      );
    
      apex_json.write( l_cur );
      l_json := apex_json.get_clob_output;
      apex_json.free_output;
      
      return l_json;
    
    end;

    Regards, Jari

  • Ibrahim 9 Apr 2025

    Oracle Database 11g Enterprise Edition Release 11.2.0.4.0 - 64bit Production

    Unfortunately, my database is 11g, so JSON is not supported. That's the problem.

    If you know of another solution, please share it with me.

  • Jari Laine 9 Apr 2025

    Hi Ibrahim,

    The exact function and detailed instructions can be found in the blog post. These have worked for me and many others, as you can see in the comments. There is no APEX version 2019. If you mean APEX version 19.x, it should work on that version as well. However, I can't verify this since I don't have access to an instance with that version.

    If you need help, please reproduce the issue on apex.oracle.com.

    Regards, Jari

  • Ibrahim 9 Apr 2025

    Ok, can you send me the exact function, because I tried a lot and used chatpt but it didn't work. Note that I'm using Oracle Apex 2019.

  • Jari Laine 9 Apr 2025

    Hi Ibarhim,

    You have mistake in function body as error message says.

    Regards, Jari

  • Ibarhim 9 Apr 2025

    The error appears when I create a shortcut and put the code in it.

    Error Message

    1 error has occurred

    ORA-06550: line 6, column 18: PL/SQL: ORA-00907: missing right parenthesis ORA-06550: line 4, column 3: PL/SQL: SQL Statement ignored

  • Jari Laine 9 Apr 2025

    Hi Ibrahim,

    What is exactly the error you get? Please reproduce issue on apex.oracle.com and share developer login details to workspace.

    Regards, Jari

  • Ibrahim 9 Apr 2025

    This solution doesn't work for me in the first part regarding the shortcut code. There is an error in the code. Is there another way?

  • Dan 1 Apr 2025

    Thank you very much for the answer.

  • Jari Laine 1 Apr 2025

    Hi Dan,

    I think you can't affect tooltip color that browser shows from title attribute. If you need customize it, then you need check other solutions with more JavaScript and custom HTML.

    Regards, Jari