I created a tooltip using CSS and #CUSTOM_ITEM_HELP_TEXT# to create item tooltips (I followed a demo held by Tyson Junglet/Dan McGhan in 2012 Skillsbuilder presentation).
It consists of the following CSS:
<style>
.tooltip {
cursor: help;
text-decoration: none;
position: relative;
color: #5555; //555
}
.tooltip span {
margin-left: -999em;
position: absolute;
}
.tooltip:hover span {
border-radius: 5px 5px;
-moz-border-radius: 5px;
-webkit-border-radius:5px;
box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.1);
-webkit-box-shadow: 5px 5px rgba(0,0,0,0.1);
-moz-box-shadow: 5px 5px rgba (0,0,0,0.1);
font-family: Calibri, Tahoma, Geneva, sans-serif;
position: absolute; left: 1em; top: 1em; z-index: 99;
margin-left: 0; width: 250px;
color: #3333; //333
white-space:normal;
text-decoration: none;
opacity:2.0;
filter:alpha(opacity=200); /* For IE8 and earlier */
}
.custom_help {
background: #8FC4D6; //#9FDAEE;
border: 1px solid #2BB0D7;
padding: 0.8em 1em;
text-align: left;
text-decoration: none;
}
</style>
declared in the page's header text
I then use two label templates (one for required, and one for optional):
Required Label template:
Before Label:
<img src="#IMAGE_PREFIX#themes/theme_2/images/required.gif" alt="#VALUE_REQUIRED#" tabindex="999" /><a class="tooltip" href="#" tabindex="-1">
After Label::
<span class="custom_help">#CURRENT_ITEM_HELP_TEXT#</span></a>
Optional Label template:
Before Label:
<a class="tooltip" href="#" tabindex="-1">
After Label::
<span class="custom_help">#CURRENT_ITEM_HELP_TEXT#</span></a>
It works great for Firefox 12 but it does not work for IE (I tried it for IE7 and IE9)
I have a working example on APEX.ORACLE.COM
Workspace: rgwork
User: TESTER
Password: TEST123
Application: DB REQUEST (27964)
Just hover over any of the label, and you will see the tooltip backgroup looks transparent and not solid in IE 7/9 but works fine in Firefox.
At work, I use APEX 4.1 with Oracle 10g Rel 2 and IE 7. (IE 7 is our standard, and we will be going to IE 9 in the coming months)
Can someone please help me ASAP. I have an application going into production this month.
Thank you.
Robert
http://apexjscss.blogspot.com