The Onfocus Tooltips extension improves the behavior
of title
-attribute tooltips so that they also
work from element focus.
View the demo to see it in action.
When an element receives the focus, a visual
tooltip is generated from its title
attribute, if it has one.
Download the
Onfocus Tooltips script,
copy it into your udm-resources
folder,
and add the script include to the body section:
<!-- onfocus tooltips extension -->
<script type="text/javascript"
src="/udm-resources/udm-x-tooltips.js"></script>
Then to style the generated tooltips you need the following CSS:
/* tooltip styling */
div.tooltip {
/* z-index should be (um.orientation[6] + 20000) */
z-index:21000;
border:1px solid InfoText;
background-color:InfoBackground;
color:InfoText;
font:0.7em verdana,helvetica,sans-serif;
padding:2px 4px;
text-align:left;
position:absolute;
width:auto;
height:auto;
}
I'm using CSS2 System Colors so that the tooltip matches the end-user's UI. There's no particular need to modify these styles, unless the z-index is too low to place it above the menus.
If you use this script it will add the behavior not just to menu links, but to all elements on the same page which are capable of receiving the focus.
This extension is not supported in Win/IE5, Opera 7.0 or Safari. The script could work in Safari 1.2 or later, but it isn't implemented because Safari doesn't support CSS2 System Colors - the tooltips would come out as white text on a white background.
UDM 4 is valid XHTML, and in our judgement, meets the criteria for WAI Triple-A conformance.