Tuesday, September 15, 2009

Tooltip Help in APEX: An alternative to popup help

The default help functionality for APEX is ok but can cause some problems with users browsers since it uses popup windows to display the help. If you do some digging around regarding web development best practices you'll find a lot of articles discussing why you should avoid popup windows. Instead of using the default help popup windows I prefer to use tooltips to display the help. Besides avoiding the popup window, tooltips generate a good user experience by displaying item help very quickly.

This demo uses a jQuery tooltip plugin: http://bassistance.de/jquery-plugins/jquery-plugin-tooltip/. Please visit the Bassistance website to find out how to configure the look and feel of the tool tips.

Here's a link to the demo: http://apex.oracle.com/pls/otn/f?p=20195:2400



- Create or Update Label Template
Note: You don't need to create a new template. If you want to, just update the existing templates
- Copy the "Optional Label with Help" and rename to "Optional Label with ToolTip".
Note: You can do this for required labels as well

- Change the "Before Label" From:
<label for="#CURRENT_ITEM_NAME#" tabindex="999"><a class="t20OptionalLabelwithHelp" href="javascript:popupFieldHelp('#CURRENT_ITEM_ID#','&SESSION.')" tabindex="999">

To:
I removed the href reference and replaced with #
<label for="#CURRENT_ITEM_NAME#" tabindex="999"><a class="t20OptionalLabelwithHelp" href="#" tabindex="999">

- Create a HTML region
This can be done on P0 to load for each page
Don't forget to upload the jQuery and tooltip JS files into Shared Components / Static Files









- Create an Application Process
Name: AP_GET_HELP_TEXT
Process Point: On Load: After Header


BEGIN
FOR x IN (SELECT ''
|| item_help_text
|| '
' help_html
FROM apex_application_page_items
WHERE application_id = :app_id
AND page_id = :app_page_id
AND item_help_text IS NOT NULL)
LOOP
HTP.p (x.help_html);
END LOOP;
END;


- Change Item Labels
Change Item labels to "Optional Label with ToolTip". Only do this if you created a new template

10 comments:

  1. Hi Martin,
    I have been trying to do this on my workspace but I am unable to get the mouseover. And I also cant figure out where I have to place the help text. I have put an example on apex.
    http://apex.oracle.com/pls/otn/
    workspace : oit
    username : DEMO
    password : demo

    application : DEMO 18939
    page : 26

    I would really appreciate it if you can have a look at it.

    thank you!!

    ReplyDelete
  2. Hi,

    I changed the Label Template that you were using for this example. It should now work.

    Before Label:
    <label for="#CURRENT_ITEM_NAME#" tabindex="999"><a class="t20OptionalLabelwithHelp" href="#" tabindex="999">

    After Label:
    </a></label>

    Martin

    ReplyDelete
  3. thank you so much. It works really good.

    ReplyDelete
  4. Hi Martin,
    I just had a question form someone who used this solution. The problem was that in IE the tooltips shortly displayed at the top of the page. In order to prevent that, you have to change the app process: htp.p a DIV first with style="display:none" and end with a htp.p of the closing DIV.
    Might help others also who run into this...

    Cheers
    Roel

    ReplyDelete
  5. Martin,

    I'm trying the tooltip but I'm not getting it to work. The tooltip shows up on the page and mouseover is only showing the '?'.

    Any suggestions?

    Thanks.

    ReplyDelete
  6. Martin,

    I found one issue, the jquery scripts weren't loading. It now works in FireFox but I'm getting an error in IE8.

    Any suggestions to resolve the $ not found issue in IE8?

    Thanks.

    ReplyDelete
  7. Hi Greg,

    Unfortunately I haven't tested in IE8. If I find an issue I'll let you know.

    Martin

    ReplyDelete
  8. Hi Martin,
    I have a question.
    How do I make class=itemToolTip for a report column? For eg, if I want empno and ename as a tooltip for that empno?

    ReplyDelete
  9. In the column heading instead of MYCOLNAME change to <span class="itemToolTip">MYCOLNAME</span>

    ReplyDelete
  10. Hi Martin

    Is there a limit to the size of the tooltip ?

    As I am facing an situation when my tooltip goes over a certain limit it crash the system in firefox i would get "System Unavailable. Please try again later." and in IE HTTP 500 Internal Server Error"

    ReplyDelete