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.
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||Add custom style classes to the Balloon UI 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/