UPDATED - 11/28/2007

• Fixed issue with scrollable document window. It will not properly position in IE6.2800, IE7, and FF2 with loose.dtd. Will test with Safari shortly.

UPDATED - 10/16/2007

• fixed issue with not properly aligning the balloon vertically when on the “top” of the element it’s pointing at. This was an obvious problem when the balloon was pointing at an element that had a significant height, i.e. > 16px.

UPDATED

• now has a timer so that you need to mouse hover on an element for 3 seconds before the balloon will appear
• fixed issue with certain default fonts in I.E. throwing off the border grid

I’ve come up with another auto-positioning “balloon” helper display. Every web “application” requires embedded help within the application and the whole concept of a “balloon” displayed to the user in the middle of the application is the de-facto web standard.

I’ve come up with a simple DHTML batch of code/graphics that will auto position a fixed width “balloon” that can focus on a single element as long as that element has an ID attribute. The example below is an IFRAME that encompasses the example itself. The code can be “stolen” (i.e. re-purposed) by viewing that FRAME’s source code.

Move your mouse cursor over the “?” icons and the dynamic positioning of the balloon pop will be displayed.

Disclaimer: This is more of a proof of concept and in no way a polished bit of functionality. Works in FireFox and IE7. There seem to be calculation issues when the user has scrolled the window - which I’ll work out soon.