Onfocus tooltips
Version 1.1 - 1st November 2004
This script is not designed to supplant the behavior or appearance of mouseover tooltips, it simply extends the principle so that tooltips also appear when an element receives the focus. It works in Opera 7 or later, Mozilla browsers, and Win/IE6 (with javascript enabled):
It iterates through all elements
once the page has loaded, and adds
focus-event handlers to any which have a title
attribute. You don't need to do
anything special - just add titles wherever they're appropriate
If scripting (or this script) is not supported, there are no ill-effects, just no focus-driven tooltips.
Get the script
Download the zipfile [4K], unzip it into your site
directory and include the script on your page -
it should go in the <body> section:
<!-- Onfocus tooltips by Brothercake - http://www.brothercake.com/ -->
<script type="text/javascript" src="tooltips.js"></script>
Then to style the generated tooltips you need the following CSS:
div.tooltip {
border:1px solid InfoText;
background:InfoBackground;
color:InfoText;
font:small-caption;
padding:2px 4px;
text-align:left;
position:absolute;
width:auto;
height:auto;
}
I'm using
CSS2 System Colors so that the tooltips
match your end-user's GUI.
There's no particular need to modify these styles, however if you have other
positioned elements on the same page then you may need to add a
z-index value to bring the tooltips above them.
![[php]](/images/php.gif "Uses PHP")