JavaScript Title To Tooltip Script

Makes titles of input fields better readable.

The Problem:

Tool Tips appear after having the mouse over an element, and NOT moving it a bit. Then, a few seconds later, it is gone. Most non-programmers don't know about that. They may have seen such tooltips, but don't really know how they work, and how to activate them.

The Solution:

This small javascript uses the title attributes of your form fields. When a field gets the focus, the title is shown below the field. It shows up immediatly, and does not go away until the field lost the focus.

Note: the standard title still shows up, except on the field that currently has the focus (and already shows the "better" tool tip).


  Standard Title: only shows up when keeping the mouse motionless for a few secs.
  Better Tool Tip: shows up immediatly on focus and stays.


  • Customize the look of the tooltip layer using styles. The default style is as shown in the screenshot.
  • Use all form fields found on the page automatically, or only use the ones defined by you.



  • Internet Explorer 5+ (tested on ie5 and ie6)
  • Netscape Navigator 7+, Mozilla 1+ (tested on Mozilla 1.4)
  • Tested on Opera 7.11


  • See the download page.
  • This component ships with the "BlueShoes Framework" and the "BlueShoes JavaScript" package (javascript/core/util/Bs_TitleToTooltip.lib.js).


Available with
  • BlueShoes "developer extended" license
  • BlueShoes commercial licenses
Check the license overview page for details.