DHTML Lab - DHTML Diner - IE4: Toggling TITLE Value Display | 3 | WebReference

DHTML Lab - DHTML Diner - IE4: Toggling TITLE Value Display | 3

home / experts / dhtml / diner / titletog
DHTML Diner Logo

This is an Internet Explorer 4 technique. The in-page examples will only work in Explorer 4 Windows and Explorer 4 Macintosh.

Toggling the Display of TITLE Values

TITLE= as a Scripting Property
The TITLE= attribute is reflected as the title property in the scripting object created by a tag. For example, the paragraph you are reading has this TITLE= (pass your mouse over the paragraph to see tool tip):

<P ID="samplePara" TITLE="This is a paragraph">

We can retrieve the value of title, and store it in a variable, in this way:

variableName = samplePara.title;

To assign a new value to title, we simply provide a new replacement string:

samplePara.title = "new string to display";

If you are using Explorer 4, click the following button to assign a new title value to the paragraph above, then pass your mouse over it again:

Toggling title Values
There is no built-in Explorer method for toggling the use of TITLE= popups. It is extremely simple to create one, however. The logic is straightforward:

  1. Have a variable track whether use of tool tips is on or off. Default can be either.
  2. Identify the page elements that have a TITLE= attribute and store them in an array, for easier reference.
  3. Cycle through these TITLE-enabled elements and create a new property for them which stores the title property. You now have the original TITLE= stored in two properties.
  4. Create a single function that either:
    1. nulls all title properties (killing popups)
    2. assigns the value of the second property to title (enabling popups)

The complete script looks like this:

isTips = true;
arTitled = new Array();
for (i=0;i<document.all.length;i++) {
    elT = document.all(i);
    if (elT.title) {
        arTitled[arTitled.length] = elT;
        elT.tooltip = elT.title;
function togTips(){
    isTips = !isTips;
    for (i=0;i<arTitled.length;i++) {
        elT = arTitled[i];
        elT.title = (isTips) ? elT.tooltip : "";

We discuss it step-by-step on the final page.

Produced by Peter Belesis and

All Rights Reserved. Legal Notices.
Created: Sept 14, 1998
Revised: Sept 14, 1998

URL: http://www.webreference.com/dhtml/diner/titletog/titletog3.html