Popup

Popup - Hover Help

Classes

• lotusPopup - the class that goes on the outermost node.
• lotusPopupTop - the class that goes on the lotusPopup node when positioned above the target.
• lotusPopupRight - the class that goes on the lotusPopup node when positioned to the right of the target.
• lotusPopupBottom - the class that goes on the lotusPopup node when positioned below the target.
• lotusPopupLeft - the class that goes on the lotusPopup node when positioned to the left of the target.
• lotusPopupClose - the class that goes on the close anchor.
• lotusPopupHeader - the class that goes on the header node.
• lotusHeading - the class inside lotusPopupHeader for the header text.
• lotusPopupContent - the class that goes on the content node.
• lotusPopupContentArea - the class inside lotusPopupContent.
• lotusPopupFooter - the class that goes on the footer node.
• lotusPopupConnector - the class that goes on the sharkfin node.

Basic Implementation

If a close icon is needed, add the lotusPopupClose anchor.

If a sharkfin is needed, add the lotusPopupConnector div. Add a marker class to the lotusPopup node to set the sharkfin directionality (lotusPopupTop, lotusPopupRight, lotusPopupLeft, or lotusPopupBottom).

If the popup content needs to fill the entire popup (no padding between the popup borders and content), do not include the lotusPopupContentArea node.

Accessibility

Put role="dialog" on the outermost div.

Popup title:

• If your popup has a visible title, use the aria-labelledby property on the outermost div to point to the h1 element that contains the title.
• If your popup doesn't have a visible title, add one using the aria-label property on the outermost div.
• Use an h1 tag for your popup title.

The element that triggers the popup (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 component.

If you choose to invoke the popup on hover/focus rather than on click, follow the coding instructions for the ARIA Dialog (Tooltip) or Popup Help design pattern. (Choose Popup Help if you want to take advantage of the F1 key's tie to the Help paradigm). Either of these patterns are used rather than the Tooltip Widget because our popups allow the user to interact with them (they can contain links).

Sample HTML - popup

CSS (popup.css)

Theme CSS (popupTheme.css)

May 24, 2011 - Component was created.

August 19, 2011 - Updated border visuals.

August 24, 2011 - Improved accessibility by using header and h1 tags, adding accessibility attributes, moving the close anchor inside the header, and changing the connector node to a div.

February 15, 2012: updated accessibility section.