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

Other Posts

Comments

No comments yet on this post