Common patterns for data visualization

These patterns display information back to the user, either in response to a user action or an application event. What follows is a non-exclusive list of patterns.

Tooltips

This pattern shows the user some floating small text with information regarding the target element, usually when the user activates the element using some action (a hover, click, selection, etc.). The information is displayed above, below, or to the side of the element in the form of a “speech bubble” (like in comic books). Here is an example:

Figure 11.8 – A tooltip displaying the name/action of the icon and a shortcut

This pattern is mostly used to display help regarding the target object, but it can be used also to display contextual menus. For example, selecting a word from this paragraph in a text editor online will display a popup with a menu:

Figure 11.9 – A tooltip pattern used...