July 2004

Marian Myerson

What is a ScreenTip?

A ScreenTip (also known as a ToolTip) is a small pop-up window with text that is visible when you rest the pointer on a designated area, and then is hidden when you move the pointer away from that area.

ScreenTips are a great way to provide more information without cluttering the screen. They often describe or provide more detail about the object (a word, button, or image, for example) that the pointer is hovering over.

Hand-coding ScreenTips

Previous to FrontPage 2003, ScreenTips would have required handcoding or scripting. For example, to create a ScreenTip using JavaScript, you would need to create two functions in the document head: one to display the tip and one to hide it. You would have then needed to code a hyperlink in the body where you wanted the ScreenTip to appear which included the onmouseover event as well as an onmouseout event.

Creating ScreenTips in FrontPage 2003

By using the Layers feature in conjunction with the Behaviors task pane in FrontPage 2003, you can add ScreenTips to your Web page without knowing any code or script.

You can create a ScreenTip on the fly by creating a layer on your Web page and then inserting text into the layer. You can control the visibility of the layers through the Layers task pane, and the behavior associated with that layer through the Behaviors task pane.

Create a sample ScreenTip

For the purposes of illustration, we are going to create a layer that contains the definition of a word. When the pointer rests on the word, the definition will be displayed. When the mouse pointer moves away from the word, the definition will be hidden.

To create the layer

1. In Page view, at the bottom of the document window, click Design. Type the word ScreenTip on the page.
   
   
2. On the Insert menu click Layer. A layer is displayed with the default name of layer1.
3. In that layer, type the definition of the word for which you want to provide more information. In this example, we are providing a definition for ScreenTip.
   
   
4. By default, the layer is transparent. Right-click the layer and then click Layer Properties to display the Layers task pane.
5. In the Layers task pane, click Layer properties, and then click Borders and Shading.
6. In the Borders and Shading dialog box, click the Shading tab, and under Fill, select a background color, and then click OK. For this example, we will choose white, although you can choose any color you wish. The background will help distinguish the layer from the rest of the page.
   
   
7. You can select and format the text inside the layer to further distinguish it from the main text. In addition, you can modify the size of the layer by using your mouse.
   
   

Format the word as a hyperlink

We want the definition to become visible when the pointer rests on the word ScreenTip. To let users know that something will happen if their pointer rests on the word, we will format that word as a hyperlink.

To create a hyperlink

1. Select the word ScreenTip by double-clicking it.
2. Right-click the selected word, and click Hyperlink.
3. In the Insert Hyperlink dialog box, in the Address box, type javascript:; and then click OK. The word ScreenTip should now be formatted as a hyperlink.

Set the behavior

It is by setting the behavior that you can get layer1 to display when the user's pointer rests on the ScreenTip text.

To set the behavior

1. Select the hyperlink we just created above.
2. On the Format menu, click Behaviors.
3. In the Behaviors task pane, click Insert and then click Change Property from the list.
4. In the Change Property dialog box, click Select Element. The layer is a DIVISION element, represent by the <div> tag, so in in the Element Type list, click div.
5. Make sure the name of the layer you want to associate with this behavior is in the Element ID box. In this case, the Element ID is layer1.
6. Click the Visibility button. In the Visibility dialog box, click Visible, and then click OK.
7. At the bottom of the Change Property dialog box, select the Restore on mouseout event check box, and then click OK.
8. In the Behaviors task pane, in the Events column, you will see the onclick and onmouseout events. Because we want the layer to be visible when the mouse pointer rests on the selected word, click the onclick event and replace it with the onmouseover event by clicking onmouseover in the events list .
   
   

Set the Layer Properties

The last step is to set the properties for layer1 so that it is hidden by default.

To set the Layer Properties

1. Right-click layer1 and select Layer Properties.
2. In the Layers task pane, click to the left of layer1 under the Layer Visibility column, indicated by the eye icon. Click again to replace the open eye with the closed eye.
   
   
3. You can now click Preview at the bottom of the document window to test your results. Move your mouse pointer over the ScreenTip text hyperlink, and the ScreenTip definition will appear.

Cross-browser compatibility

Users browsing your site with Netscape 4.7 or earlier may not see your ScreenTips correctly. You can get around this problem by manually setting property names and values so that older versions of Netscape will display the ScreenTip properly.

To add Netscape 4.7-compatible layer properties

1. Right-click the layer for which you want change the properties, and then click Layer Properties.
2. In the Layers task pane, under See Also at the bottom of the pane, click Behaviors.
3. In the Behaviors task pane, click Insert, and then click Change Property.
4. In the Change Property dialog box, clickSelect Element. The layer is a DIVISION element, represented by the <div> tag, so in the Element Type list, click div. Make sure the name of the layer you want to associate with this behavior is in the Element ID box. In this case, the Element ID is layer1.
5. In the Change Property dialog box, click Add.
6. In the Insert Property dialog box, in the Property Name box, type visibility. Because we want the layer to be hidden by default, in the Property Value box, type hide, and then click OK.

    Note   If you want the layer to be visible by default, the value is show.

7. At the bottom of the Change Property dialog box, select the Restore on mouseout event check box, and then click OK.
8. In the Behaviors task pane, in the Events column, you will see the onclick and onmouseout events. Because we want the layer to be visible when the mouse pointer hovers over the selected word, click the onclick event and replace it with the onmouseover event by clicking onmouseover in the events list.

You can now click Preview at the bottom of the document window to test your results. Move your mouse pointer over the ScreenTip text hyperlink, and the ScreenTip definition will appear.

Take a peek at the code

By clicking Code at the bottom of the document window, you can see the script that FrontPage has generated for you. At the top of the page, between the <head> and </head> tags, are the two functions: one for showing the layer and one for hiding the layer.

Further down the page, in the <a> tag for ScreenTip, you will see the event handlers (onmouseover and onmouseout), as well as the calls to the functions in the header. For an introduction to JavaScript, see Working with Script Code, an excerpt from Microsoft Office FrontPage 2003 Inside Out by Jim Buyens.

In FrontPage 2003, layers are defined as absolutely positioned DIVISIONS. If you set the Positioning style to Relative or None, the layer will no longer appear in the Layers task pane. The DIVISION , however, will keep the same ID, so if you set the Positioning style of layer1 to Relative, you will be able to find that layer in Code view by searching for layer1.

ScreenTip design best practices

Because layers are absolutely positioned, ScreenTips such as those described in this article work best with fixed width Web pages. If you are working with a page that is fluid, meaning the text flows the width of the page as determined by the visitor's browser, there may be times when the position of the layer you created will not correspond to the position of the hyperlink. By using fixed width pages, the layers will remain near the hyperlinks associated with them, allowing visitors to view the layer in the correct position when they mouse-over the hyperlink.

For consistency, use the same width, as well as the same position (10 pixels from the left, for example, or 25 pixels from the right) for each of the layers you create to display ScreenTips. The distance from the top will be determined by how far down the page you are placing the layer.

The length of the layer can be determined by the length of your definition. For pixel-precise positioning, open the Layers task pane, click Positioning, and then use the Location and size options in the Position dialog box.

For example, the number in the Left box under Location and size determines the exact location in numbers of pixels the layer will be positioned from the left border of the browser window. So, if the number in the Left box is 10, the layer will appear 10 pixels from the left of the browser window. Although there are options for the Left, Right, Top, and Bottom positions of the layer, not all four measures are necessary. It is quite common to choose a point of reference— top and left, for example—and base the position of all the layers on the page in reference to the top and left borders of the browser window. The numbers in the Width and Height boxes determine the exact size of the layer, and the Z-Order indicates in which order the layers will appear if they overlap each other.

ScreenTip style also can be managed through the use of cascading style sheets (CSS). By creating a class called screentip, and applying it to each layer, you can design visually consistent ScreenTips throughout your site. For more about cascading style sheets, see Using Cascading Style Sheets to design your Web site by David Berry.

Conclusion

Of course, definitions are only one way to use layers on your Web page. With the procedures in this article, you can create and use layers with behaviors to add other functionality to your Web page.

Marian Myerson is a systems architect and engineer, and a vice president for Web site management. A noted columnist and writer with over 200 published articles, Marian is the editor of Enterprise Systems Integration (2nd edition) and the author of The Complete Book of Middleware.