The right way to add popup help balloons to your javascript app is to download Qtip, a jquery library that works and gives you excellent control over how your popup balloons work. I’ve used it in other apps, but last night I couldn’t get it to work with my Google Books -> Harvard Library mashup — it uses the Google Books API to do full text searching of books, and then tries to find the results in the Harvard catalog — I think because I need to use an older version of jquery because another set of tools in this app requires it. So, I decided to scribble together a very simple balloon help.

This html page demos it and contains in its source the very simple javascript and css. NOTE: I’m sure that I’ve implemented it in a boneheaded way and that it won’t actually work except under ideal conditions. Best I can do.

The basic way this works:

• The element that will get a popup help should have an attribute called “help.” The content of that attribute will be the content of the balloon. E.g. <p help=”This is some <em> help</em>.”>

• Declare the elements getting a balloon to be position:relative.

• Create the help balloons using the CSS styling you’d like, but make their position absolute. Use margin-top and margin-left to position them relative to the element they’re explaining. Don’t forget about negative margins.

• Change the mouseenter event for elements with the “help” attribute. Also the mouseleave event.

Remember, I probably did some things very very wrong. Use Qtip or some other library that works and works reliably. But, having written this for myself, I figure I ought to share it. (And, by the way, the Google Books -> Harvard Library code is here. Have pity on a poor amateur.)

Categories: tech dw