User Interface - Inline Help Overlay [closed]

Question

I have a client looking for a inline help system similar to the type Facebook and Google use to highlight interface changes.

Here is an example from UI Patterns: http://ui-patterns.com/users/1/collections/38/entry/5759

Before I pitch a custom solution, I really need to find out if there are any existing libraries or services for providing this. I've tried umpteen different keyword combos on Stack Overflow and Google (among others).

Basically the client would like to select an element of the interface and provide some extra help that the user can display by, say, selecting a help icon next to the element.

Does anyone know of an existing service or drop-in library?

Answer 1

I use ClueTip, its very similar and works off common HTML semantics. The documentation page is not very inspiring, but that certainly doesn't limit your use of the plugin.

What is really great is that it plays nice with jQuery UI themeroller themes.

ClueTip - http://plugins.learningjquery.com/cluetip/

Demo page here - http://plugins.learningjquery.com/cluetip/demo/

Answer 2

This is a bit of a plug but I've created Overlay101 that brings up an inline help overlay that can be managed by non developers. I think it's much easier than maintaining a jquery extension.

You can highlight elements based on id or css selectors. Once the javascript has been added to your page, you can pretty much hand it off to whomever writes the help text.

Answer 3

I use SimpleTip. It's JQuery-based and allows arbitrary HTML to show up in the overlay (although the demos at the dev's website don't show images or fancy formatting), and the code is simple enough to customize if you need to make changes.