Popup Help

Classes

• lotusHelp - the class assigned to the wrapping div of the component.
• lotusHelpHeader - the class assigned to the html5 header tag.
• lotusHeading - the class assigned to the html5 heading tag.

Basic Implementation

The help information is coded on the page in an absolutely positioned div that is placed below the footer and assigned a unique id. You need to set this display of this div to none to initially hide it.

h3 tags (or the equivalent) are used for the help title (the bolded text that includes the colon)

Accessibility

The lotusHelp div is assigned a unique id. It also should have an aria-label that matches the text (or alternate text in the case of an icon) of the element that triggers it.

The element that triggers the popup help (a link or button) is assigned the attributes aria-haspopup="true." If the trigger element is a link, it should also have a role="button" attribute.

If the popup help is not a DOM child of the triggering element, the triggering element should have an aria-owns property whose value is the id of the popup help component. (e.g. <a href="#" aria-owns="popupHelp">More actions</a>)

If you choose to invoke help on hover/focus rather than on click, follow the coding instructions for an ARIA Tooltip Widget.

Sample HTML

CSS (help.css)

Theme CSS (helpTheme.css)

This component began as a tips box. There was a popup variation that was styled very similarly. Over time this has changed, but we still have the legacy lotusInfoBox that we have to assign along with the lotusHelp class.

September 2010: Created a new version of help that only uses the lotusHelp class. Wrapped the heading text in an html5 header.

January 2011: added accessibility documentation

February 9, 2011: Removed the styling to automatically hide the component using top:-9999px. This wasn't hiding the component for screen reader users.