Skip to main content

 

Patterns

 

Applies only to Traditional Web Apps

 

OutSystems

Balloon

  • Edit
  • 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.

    1. In Service Studio, in the Toolbox, search for Balloon.

      The Balloon widget is displayed.

    2. From the Toolbox, drag the Balloon widget into the Main Content area of your application's screen.

    3. 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.

    4. In the Content placeholder, enter the content you want to display. In this example we add text.

    5. Repeat steps 2-4 for each of the elements that require a Balloon pop-up.

    6. 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.

    7. After following these steps and publishing the module, you can test the pattern in your app.

    Demo

    Properties

    Property Description
    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:

    • Bottom
    • Left
    • Right
    • Top

    Examples

    • Entities.PositionBase.Bottom - The content displays below the element. This is the default value.
    • Entities.PositionBase.Right - The content displays to the right of the element.
    Trigger (Trigger Identifier): Optional Sets the action that triggers the content to display. The predefined options are:

    • Click
    • Hover
    • Manual

    Examples

    • Entities.Trigger.Click - Content displays when the user clicks the element.
    • Entities.Trigger.Manual - Requires that the tooltip is triggered programmatically.
    • Entities.Trigger.Hover - Content displays when the user hovers over the element.
    ExtendedClass (Text): Optional Add custom style classes to the Balloon UI Pattern. You define your custom style classes in your application using CSS.

    Examples

    • Blank - No custom styles are added (default value).
    • "myclass" - Adds the myclass style to the Balloon UI styles being applied.
    • "myclass1" "myclass2" - Adds the myclass1 and myclass2 styles to the Balloon UI styles being applied.
    AdvancedFormat (Text): Optional Enables you to use more options than what is provided in the input parameters.

    Example: { arrow: false, showOnInit: true }

    For more information visit: https://atomiks.github.io/tippyjs/
    • Was this article helpful?