Preview pop-up

Preview pop-up is a floating component used for displaying more detailed data about an item that has focus in the main pane.

Figure: Preview pop-up

The preview is displayed with a 0.6 second delay after the focus is moved (for example, scrolling down a list with the Arrow keys) to avoid too rapid and continuous flicker. The default time-out for closing the preview pop-up is the same as for the Information pop-up, but it is possible to adjust it if necessary.

Preview pop-up contents cannot be scrolled and the component must not contain any buttons or other elements that make it appear interactive: the component is the same in both standard and touch-enabled devices and should the component be used in a standard non-touch device, its elements should not look touch-enabled. There can be a maximum of five text rows in a preview pop-up, and it is possible to place a small icon in the start of the rows. It is even possible to have more than one icon on a row instead of text, if necessary. The number of images in a single preview pop-up is limited to one, and it can be accompanied by up to two rows of text.

Preview pop-up shows always duplicate data in a given application to ensure that the user will not miss any content or functionality even if a given product does not utilize preview pop-up (that is, it has been switched OFF). Owing to the special nature of preview pop-up, it is important to thoroughly consider its genuine usefulness in various applications. Furthermore, the component should not be confused with the Information pop-up note even though the data displayed in these two components can at times be identical.

Table: Default touch events in Preview Pop-Up

User action

State change


Touch down / release in Preview pop-up area


Tactile: Tactile feedback follows the component-specific functionality.

Touch down / release outside Preview pop-up


Tactile: No effect

Touch down and hold


Tactile: Basic tactile feedback and audio feedback is provided with touch down event.

Note: No tactile feedback is provided with preview pop-up. Applications need to take care of tactile feedback for the interactive elements inside Preview pop-up.

Preview pop-up in a touch interface

Preview pop-up is not a touch-only component, and its basic functionality is described above. Although it is not recommended to place buttons or other items that appear touch-enabled into the preview pop-up, it is still possible to give some items touch-only functions. It is up to each application to decide whether to make use of this support in some sensible way. For example, a tap on a www hyperlink displayed in the preview pop-up would open Browser and open the Web site in question. However, it should be noted that using touch-enabled items in the preview pop-up is an advanced, heavy-user feature.

A tap on an item in the preview pop-up can also open the stylus pop-up menu, when there is no obvious direct function for that item. For more information, see Stylus pop-up menu.

Preview pop-up for touch only

The above section describes the general case for touch and the preview pop-up. There is, however, a variance possibility for the preview pop-up, which is to limit it strictly for touch. In this case, the guideline for having no buttons or other obvious touch items in the preview pop-up can be ignored for the most part: if the preview pop-up can only be opened with a stylus, it is perfectly acceptable to make touch functions plainly touch-enabled.

Using preview pop-ups in applications

The API to use for creating the preview pop-up component is the Information preview pop-up API.

Preview pop-ups can be used in two modes: in the default mode where the pop-up is hidden automatically as a result of time-out or input event (either a key press or a pointer event), or in permanent mode where the pop-up stays visible until it is dismissed by the application code.

For implementation information, see Using the Information Preview Pop-up API.