Callout

Introduction

The Callout is a small popup that allows the user to obtain more information on a view element without leaving the current context. The Callout is an non-modal overlay which means that the background remains accessible. The contents of a callout should be immediately related to the referenced screen element, like links to help, immediate settings or quick views. The Callout disappears of the user leaves the area of the Callout or clicks elsewhere.

A Callout is opened:

The Callout is closed:

Note: do not attach a Callout to any control inside of another Callout, Menu, or a DropDownBox. This is not user-friendly, may lead to unpredictable behavior and is not supported.

Basic Example

Like the RichTooltip control, a Callout is assigned to a SAP UI5 control by setting its tooltip property either in a JSON-constructor object or calling the setTooltip() method (see API Documentation).

The Callout is an empty container and therefore may not be used without contents. Applications must provide contents in a content attribute of the Callout control. It can be either a single SAP UI5 control/view or an array of SAP UI5 controls.

The following sample attaches Callouts to each of the two controls:

Methods and Properties

Callout inherits properties and methods from the TooltipBase control. Open and close duration of the Callout can be adjusted with help of setOpenDuration and setCloseDuration methods.

The default docking placement of the Callout window is aligned with the left edge above the parent control. It can be adjusted with help of the setPosition(myPosition, atPosition) method. The meaning of the corresponding docking parameters is explained in the Popup.Dock documentation.

The tip in form of the small triangle is shown only above or below of the Callout and points to the parent control. The tip is hidden when the Callout is placed completely outside of the parent control.

Late Loading

The Callout control allows to load and create its contents at the later time point after it is created itself. This can be useful when, for example, the application developer decides to request data from server only when the Callout is opened or a user hovers the mouse pointer over the parent control.

The following sample adds a new button to a Callout during the first occurrence of the open event:

It is possible to postpone display of the callout until its data is loaded to server. To do that, create a listener to the beforeOpen event and call function preventDefault of the event object like in the following sample:

The following events are available:

Keyboard Commands

To open a callout with a keyboard command instead of a mouse, set the input focus to its parent control and press Ctrl-I. In that case the input focus is set to the first focusable element of the callout contents.

Press Esc to close an opened callout that has the input focus.

If a user has focused some of elements inside of a callout window and closes the window, the focus is set to its parent control disregarding any other controls that could be focused before the callout has been opened.

API Documentation

See API documentation