Here’s a simple tooltip demo within the ExtJS Integration framework we are building to give you a example of how to use JSON objects within Ext widgets….

The APEX item help provided uses a popup to display the help information, whilst useful for large amounts of text generally our help fields are quite small, not to mention that we have to allow an exception for our popup blocker for the site. As a simple alternative, we are going to use an Ext tooltip widget as an override which will pull data from a JSON object created at page load time with the help text informaton.

We create an application level process that runs “After Header” which creates our JSON object on the page via PLSQL e.g.

Note: you will need to have your own JSON package to build the object, or you could simply manually do it, this is just an overview of the idea!

    FOR c1 IN (SELECT item_name
               ,      nvl(item_help_text, 'There is no help for this item!') item_help_text
               FROM   apex_application_page_items
               WHERE  application_id = v('APP_ID')
               AND    page_id        = v('APP_PAGE_ID')
               )
    LOOP
      my_obj := extjs_json_util.addAttr(my_obj, c1.item_name, c1.item_help_text);
    END LOOP;

    --
    -- Lets add the above built array to the JSON object
    --
    extjs_json_util.closeJSONObj(my_obj);
    htp.p('<script language="JavaScript" type="text/javascript">');
    htp.p('    var extTooltipJSONObject = '||extjs_json_util.JSON2String(my_obj));
    htp.p('</script>');

In the “After Label” section of the label template we provide the following:

<script language="JavaScript" type="text/javascript">
    new Ext.ToolTip({
        target: 'tooltip#CURRENT_ITEM_NAME#',
        html: extTooltipJSONObject.#CURRENT_ITEM_NAME#
    });
</script>

The end result is a nice tooltip that is displayed onmouseover over the label hyperlink.