Skip to main content




Applies only to Traditional Web Apps


  • Edit
    Collaborate with us
    Edit this page on GitHub
  • 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.

      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.

    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.



    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


    • 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


    • 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 Adds custom style classes to the Pattern. You define your custom style classes in your application using CSS.


    • Blank - No custom styles are added (default value).
    • "myclass" - Adds the myclass style to the UI styles being applied.
    • "myclass1 myclass2" - Adds the myclass1 and myclass2 styles to the UI styles being applied.
    You can also use the classes available on the OutSystems UI. For more information, see the OutSystems UI Live Style Guide.
    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:
    • Was this article helpful?