Tooltips, Popovers and Modal Dialogs

The UI includes a number of UI elements that supplement the main content by overlaying the main content upon various user actions. For our purposes, these consist ok Tooltips, Popovers and Modal Dialog Boxes.

• Tooltips are static content that appears when a user hovers over an "target" element in the UI, and disappears when the mouse leaves the the target element. The user does not interact with the content, so it is used in situations where it is useful to provide a brief description of the target element's purpose. Note that Tooltips are generally not useful on mobile devices, since it is unnatural for users to simulate hovering a mouse by holding down their finger on a target element. TDM is explicitly not designed for mobile device, though, so we do use tooltips frequently in TDM for helpful tips.

• Modal Dialog Boxes are used when the user is required to provide input or approve actions before a process can proceed. Modals are triggered by any user type of user action that initiates a process, such as clicking on a button, link or other UI element, navigating away from a page (but not just hovering over an element). They block access to other features in the application and typically have a translucent overlay over the rest of the application UI until the user completes the modal action. "Modal" refers to the fact that when a modal dialog is opened, the application goes into a mode that requires action and explicit closing until the application returns to it's normal state.

• Popovers are similar to Modal Dialogs, in that they can be triggered by a variety of deliberate user actions, and their content would usually allow user interaction. However, they do not prevent the user from interacting with the main content of the page, and will close when the user interacts with the underlying page by clicking outside the Popover content. They are typically used for situations like:

  • Context Menus where the user can open a menu, then selects a menu item, whereupon the context menu popover closes automatically.
  • Specifying options, such as on the My Projects page where users can click on a column heading, which opens a popover that allows them to specify filtering and/or sorting options.
  • If you want to present static information to a user that is lengthy and do not want it to be triggered by hover actions, you can use a Popover for this as well, but it will need to be explicitly dismissed by a user, perhaps with a close box, a click on the target element or clicking outside the popover content. An example is the Create Project Wizard's Sidebar where users can click on one of the question mark icons to see a detailed description of what Target or Earned points represent.

NOTE: On the Create Projects Wizard, most pages have icons with exclamation points that appear when you hover over certain input fields, these trigger an expander component which is not the same as a tooltip, popover or modal dialog, since it does not overlay the page content. Instead, it inserts content in the page next to the target element that opens it and pushes other elements on the page down to make room for the content. The FAQ page also makes extensive use of expanders.

Implementation

Both Tooltips and Popovers have content that appears next to a target element that triggers the content to appear. This is a fairly complicated component to implement, because the content may need to automatically change location depending on where there is room for it to render as the screen dimensions change or users scroll to move the target element around. This is even more complicated when we wish to add an arrow that points to the target element. Rather than coding this from scratch, we use a library, react-tiny-popover to implement this functionality for both Tooltips and Popovers.

Likewise, Modal Dialogs also have complex behavior, such as providing a translucent overlay over the rest of the application which prevents the user from interacting with elements outside the dialog, and fairly involved ARIA requirements, such as keyboard accessibility, so we use the library react-aria-modal as the basis for our dialogs.

Expander operation is very specific to the situation, and do not have very complicated edge cases, so we typically custome code these on a case-by-case basis.