Onfocus Tooltips extension

Version 1.1

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.

Installation

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.

Implementation notes

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.

Browser notes

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.


Search

We would like your feedback! Take the UDM4 Survey!

UDM 4 is valid XHTML, and in our judgement, meets the criteria for WAI Triple-A conformance.

-