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.

Get the script

BSD License → Terms of use

Categories...

Website gadgets

Bits of site functionality:

Usability widgets

For enhancing usability:

Local network apps

Web-applications for your home or office network:

Game and novelties

Our internal search engine is currently offline, undergoing some configuration changes in preparation for a major site overhaul. In the meantime, you can still search this site using Google Custom Search.


In this area

Main areas


[brothercake] a round peg in a square hole, that still fits