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
Hi Martin,
ReplyDeleteI 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!!
Hi,
ReplyDeleteI 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
thank you so much. It works really good.
ReplyDeleteHi Martin,
ReplyDeleteI 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
Martin,
ReplyDeleteI'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.
Martin,
ReplyDeleteI 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.
Hi Greg,
ReplyDeleteUnfortunately I haven't tested in IE8. If I find an issue I'll let you know.
Martin
Hi Martin,
ReplyDeleteI 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?
In the column heading instead of MYCOLNAME change to <span class="itemToolTip">MYCOLNAME</span>
ReplyDeleteHi Martin
ReplyDeleteIs 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"
There could be an issue if it an individual help text content exceeds the limits allowed in the htp.p call. In that case you may need to chunk your htp.p calls.
Delete