Skip to Main Content
Posted on

Interactive report column headings tooltip help

Category APEX Tips and Tricks

Here is how you can add tooltip help to interactive report column headings.

First go add help text to your interactive report columns. See Editing Interactive Report Column Attributes.

Next create page process to Process Point "On Load -After Header".

DECLARE
  l_sql VARCHAR2(32700);
BEGIN
  l_sql := '
  SELECT COLUMN_ALIAS,
    HELP_TEXT
   FROM APEX_APPLICATION_PAGE_IR_COL
  WHERE APPLICATION_ID = :APP_ID
    AND PAGE_ID = :APP_PAGE_ID
    AND HELP_TEXT IS NOT NULL
  ';

  HTP.p ('<script type="text/javascript">');
  -- Create JSON object.
  HTP.prn ('var gIrColHelp = $u_eval(''(');
  APEX_UTIL.JSON_FROM_SQL(l_sql);
  HTP.prn (')'');');
 
  HTP.p ('</script>');
END;

Create dynamic Action. Select Advanced

  • Name: Set Column Headings Title
  • Event: After Refresh
  • Selection Type: Region
  • Region: {select your report region}
  • Condition: No Condition
  • Action: Execute JavaScript code
  • Fire On Page Load: True
  • Code:
$.each(gIrColHelp.row,function(i,jd){
 $($x(jd.COLUMN_ALIAS)).attr({"title":jd.HELP_TEXT});
});
  • Selection Type: None

Now when you run page and hover mouse over interactive report column heading you can see help on tooltip.

See working example.

Comments

  • Jari Laine 8 Jul 2023

    Hi ENOCK,

    Unfortunately I can't check this on APEX 5.1. If I recall I have write this blog post on APEX 4.x times and APEX development team did some point change how IR header id is generated. It might be it did change on APEX 5.

    But see if after footer process and dynamic action code from previous comments work for you.

    Regards,
    Jari

  • ENOCK 7 Jul 2023

    Jari,
    iam using the same approach fo my IR column header but without any error it doesnt show the tooltip:
    1. Help text: Sample data,
    2. before Header process: As is,
    3. After refresh DA on the report region: As is,
    but it doesn't work,
    iam using Apex 5.1x

  • Jari Laine 27 Jan 2022

    Hi Stefan,

    Please change after footer process code as below and test does it work.
    I'm not sure is this best way fetch needed data, but for my quick test it did work correctly.

    declare
  l_json varchar2(32700);
begin
  select json_object(
    'row' value json_arrayagg(
      json_object(
        'column_alias' value t1.column_alias,
        'column_id' value 'C' || t1.column_id,
        'help_text' value coalesce( to_char( t2.to_string ), t1.help_text )
      )
    ) returning varchar2
  ) as d
  into l_json
  from apex_application_page_ir_col t1
  left join apex_application_trans_repos t2 on 1 = 1
    and t2.internal_attribute_name = 'APEX_IR_COLUMNS.HELP_TEXT'
    and t2.language_code = apex_application.g_browser_language
    and t1.application_id = t2.application_id
    and t1.page_id = t2.application_page_id
    and t1.column_id = t2.from_id
  where 1 = 1
  and t1.application_id = :APP_ID
  and t1.page_id = :APP_PAGE_ID
  and t1.help_text is not null
  ;
  htp.p ('<script type="text/javascript">');
  -- Create JSON object. Note need to use htp.prn so line feed isn't sent
  htp.prn ('var gIrColHelp = ' || l_json || ';');
  htp.p ('</script>');
end;

    Regards,
    Jari

  • Jari Laine 27 Jan 2022

    Hi Stefan,

    I can reproduce issue, but couldn't find quickly fix. Need dig more about this and understand what data is available in APEX views.

    It seems there is also APEX bug, that build in IR column help shows wrong language help text. But that isn't root cause why the tooltip shows primary application help text even you run translated version.

    Regards,
    Jari

  • Stefan 27 Jan 2022

    Hi Jari,
    thats the code for After Footer Process:

    declare
  l_json varchar2(32700);
begin
  select json_object(
    'row' value json_arrayagg(
      json_object(
        'column_alias' value column_alias,
        'column_id' value 'C' || column_id,
        'help_text' value help_text
      )
    ) returning varchar2
  ) as d
  into l_json
  from apex_application_page_ir_col
  where application_id = :APP_ID
  and page_id = :APP_PAGE_ID
  and help_text is not null
  ;
  htp.p ('<script type="text/javascript">');
  -- Create JSON object. Note need to use htp.prn so line feed isn't sent
  htp.prn ('var gIrColHelp = ' || l_json || ';');
  htp.p ('</script>');
end;

    and here the dynamic action:

    var $Region=$(this.triggeringElement);
$.each(gIrColHelp.row, function(i,jd){
  $Region.find([$x(jd.column_id),$x(jd.column_alias)]).attr({"title":jd.help_text});
});
  • Jari Laine 27 Jan 2022

    Hi Stefan,

    Thanks for reporting bug that you get HTTP 400 error when try post code.

    Could you please try post code again?

    Regards,
    Jari

  • Stefan 27 Jan 2022

    Hi Jari,
    i cant post the code. I always get error 400.
    I used the code for after footer without modifications.
    Oracle Version 19.13 Apex Version 21.1.0
    Regards
    Stefan

  • Jari Laine 27 Jan 2022

    Hi Stefan,

    What is your APEX and database version?
    Do you use code as is from this blog post or have you done some modifications?

    Regards,
    Jari 

  • Stefan 27 Jan 2022

    Hello Jari,
    i have an application with translation. Is it possible to read the right language on page load? At the moment it only catches the german phrases.
    thanks in advance

  • Jari Laine 8 Feb 2021

    Hi Robert,

    Changes I made to your application works only for Interactive Grid. Because Interactive Grid and Interactive Report column help is available on different APEX views.

    Changes I did to your application should work on APEX 20.1 and Interactive Grid.

    Make sure page process to fetch help information is before or after footer. And check you have placed JavaScript to correct place in page attributes. See that IG region have static ID. Make sure you update that region static ID to JavaScript on page attributes.

    If you run page in debug mode, can you see any errors? Or do you get any JavaScript error on browser console?

    Regards,
    Jari