You can use the Balloon UI Pattern to display content in a pop-up on the UI. The Balloon UI Pattern is useful when you need to display additional information related to a small on-screen element.
How to use the Balloon UI Pattern
In this example, we use the Balloon as a tooltip on a screen with a form.
In Service Studio, in the Toolbox, search for
The Balloon widget is displayed.
If the UI widget does not display, it may be because you used a ready-made app, which deletes unused widgets from the module. To make additional widgets available in your app:
a. Go to Module > Manage dependencies.
b. Search for and select the relevant Producer, for example OutSystemsUI. Ensure Show All is selected.
c. On the Public elements for the selected Producer displayed on the right, ensure Show All is selected.
d. Search for and select the element you want to add, and click Apply.
e. In Service Studio, in the Toolbox, search for the widget again.
From the Toolbox, drag the Balloon widget into the Main Content area of your application's screen.
To bind the Balloon widget to the First Name input widget, on the Properties tab, from the WidgetId dropdown, select firstname.Id.
Note: The WidgetId comes from the element Name you are binding the balloon with.
In the Content placeholder, enter the content you want to display. In this example we add text.
Repeat steps 2-4 for each of the elements that require a Balloon pop-up.
On the Properties tab, you can change the look and feel of the Balloon widget by setting the (optional) properties, for example, the position of the content on screen and what action triggers the content to display.
After following these steps and publishing the module, you can test the pattern in your app.
|WidgetId (Text): Mandatory||Id that triggers the element so it is visible.|
|Position (PositionBase Identifier): Optional||Sets the position of where the Balloon content is displayed in relation to the widget. The predefined options are:
|Trigger (Trigger Identifier): Optional||Sets the action that triggers the content to display. The predefined options are:
|ExtendedClass (Text): Optional||Adds custom style classes to the Pattern. You define your custom style classes in your application using CSS.
|AdvancedFormat (Text): Optional||Enables you to use more options than what is provided in the input parameters.
For more information visit: https://atomiks.github.io/tippyjs/