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.
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:
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.
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:
beforeOpen
- A callout window is to be opened. This event can be used to request display
data from a remote server. Call function preventDefault
of the event
object to postpone display until required data is loaded.open
- A callout window has been opened. If callout contents is dynamically created or changed during or after that event,
the method adjustPosition
without parameters should be called to ensure proper
positioning of the callout window after a possible change of window size.close
- A callout window is closed.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.