Tip Window Maker

Tip-window Maker Cool Tool

Start with a widget that exploits certain features of the Window object. The widget, which works best in 4.x browsers, pops up a small tip window when the user hovers over a link.

To see how it works, hover your mouse pointer over the Web page widgets link in this sentence. Don't click, just hover over the link. This type of tip window is a great way to add information to a Web site without adding clutter to the page or forcing users to click to another page. And it's also a good excuse for exploring the features of the JavaScript 1.2 Event object.

The Tip-window Maker
I got the idea for the Tip-window Maker from the title attribute of the <A> tag. The attribute was introduced in HTML 4.0, and it identifies text that the browser can display when users mouse over a link. If you're using Internet Explorer 4.0 or later, mouse over this link. The text This is the link's title should be displayed in a small tool-tip window. (You may need to rest your mouse over the link for a few seconds in order to trigger the pop-up text display.)

The HTML used to create this effect looks like this:

Setting the href attribute to javascript:void(0) makes the link inactive. That means clicking the link will not cause a new page to load.

The title attribute is a great way to describe the target of a link, but it works only with Internet Explorer 4.x. Netscape Navigator ignores the title attribute. Luckily, JavaScript provides an easy workaround for Netscape's error of omission, at least for Navigator 4.x. There are four basic keys to remember:

Use the mouseOver event to determine when the user is hovering over a link.
Handle mouseOver by using window.open() to create the tip window.
Use the mouseOut event to determine when the user is no longer hovering over the link.
Handle mouseOut by using the window.close() method to close the window created in Step 2.

Implementing the above steps takes just two JavaScript functions, displayPopup() and closePopup(), placed in the <HEAD> of the document from which you want the tip window to pop up. I'll get to the code for those two functions shortly. Getting these functions to work requires a global variable that determines whether the browser is a 4.x. Use the version4 global variable for this, putting the following code in the document head:

// Quick way to test for Navigator 4.x or IE 4.x
var version4 = false;
if (navigator.appVersion.charAt(0)) == "4" version4 = true

Or, if you want to get a bit fancier, condense those two lines into one:

var version4 = (navigator.appVersion.charAt(0) == "4");

Now connect the mouseOver and mouseOut events to these functions using the HTML shown here:

<A href="javascript:void(0)"
onMouseOver="displayPopup('widget-def.htm','popup1',150,300,(version4 ? event : null))"
onMouseOut="closePopup()">Web page widgets link</A>

The mouseOver event invokes the displayPopup('widget-def.htm', 'popup1', 150, 300, (version4 ? event : null)) function. This opens a new window, named popup1, whose contents are loaded from the URL widget-def.htm. The window's size is set to 150 pixels high by 300 pixels wide.

The conditional expression (version4 ? event : null) evaluates to either the Event object if version4 is true, or the null value if version4 is false. You can learn more about the conditional expression in Netscape's JavaScript Reference Manual.

The Event object was introduced in JavaScript 1.2 to allow event handlers to obtain information about an event. A null value means that the browser is not a version 4.x (and therefore not a JavaScript 1.2-capable) browser. (I'll have more to say about the JavaScript 1.2 Event object later.)

The actual displayPopup() function, which appears in the document head, looks like this:

function displayPopup(url,name,height,width,evnt) {
var properties = "toolbar=0,location=0,height="+height
properties = properties+",width="+width
if(evnt != null) {
  if(navigator.appName == "Microsoft Internet Explorer") {
  properties = properties+",left="+(evnt.screenX + 10)
  properties = properties+",top="+(evnt.screenY + 10)
}else { // Navigator coordinates must be adjusted for scrolling
  properties = properties+",left="+(evnt.screenX - pageXOffset + 10)
  properties = properties+",top="+(evnt.screenY - pageYOffset + 10)
  }
}
popupHandle = open(url,name,properties)
}

The properties variable is assigned a list of features for the window.open() method, which creates and opens a new browser window. (If you are not familiar with its use, see Charity Kahn's "JavaScript does windows" SuperScripter column for details.)

In this case, setting the toolbar and location features to 0 makes the window display without a toolbar or location field. This gives you more useful display room inside the window. The height and width properties are set from arguments of the same name passed to the function.

The if (evnt != null) statement checks to see if the browser supports the Event object. The second nested if statement checks to see whether the browser is Internet Explorer or Navigator. (Unfortunately, the Opera browser does not currently support JavaScript 1.2.) IE's support for event screen coordinates is straightforward, making it easy to set the starting coordinates for the tip window. Navigator requires that you adjust these coordinates for any scrolling that may occur, which is what the window.pageXOffset and window.pageYOffset values are all about.

The Event object
In JavaScript 1.2, an Event object is created for each event that occurs. The Event object contains properties that describe the nature of the event's generation. Some of these properties differ between Internet Explorer and Navigator. However, both Navigator and IE support the screenX and screenY properties:

screenX identifies the horizontal position of the mouse (relative to the physical screen) when the event is generated.
screenY identifies the vertical position of the mouse when the event is generated.

The displayPopup() function uses screenX and screenY to position the upper-left corner of the window 10 pixels to the right of the user's cursor and 10 pixels below. Note that this window positioning capability works only with 4.x browsers.

Closing the window
The code for closing the tip window, which also goes in the document head, is simple but somewhat deceptive:

function closePopup() {
if(popupHandle != null && !popupHandle.closed) popupHandle.close()
}

You might wonder why it checks for popupHandle !=null && !popupHandle.closed. The reason is a bug in the way Internet Explorer handles certain instances of the mouseOver and mouseOut events. If the tip window completely covers the cursor, Internet Explorer may temporarily "lose" its reference to the tip window and display an ugly error message.

That's about it. The Tip-window Maker Cool Tool creates most of the code for you, but now you know how it works

javascript tips pop up javascript