Use popovers on a UI Builder page to overlay contextual information or functionality to help users complete tasks.

A popover is a small window or dialog box that appears above a UI Builder page and contains additional information, options, or actions related to the content or task at hand. Add components to a popover in the same way you add modals to a page.

You can place popovers anywhere on a UI Builder page where you think additional information helps the users. Popovers are intended to provide small pieces of information or links to related content, so you should limit the amount of information or functionality within a popover because the popover only displays when a user is interacting with it.

You can make popovers visible or hidden with event mapping, such as triggering a popover to appear when selecting a button or pointing to a part of the page. For more information, see Define map events.

Figure 1. Informational popover
Page with tool tip text link that has been selected to show an additional information popover.

Add popover to a UI Builder page

Learn how to add a popover in UI Builder. A popover is a container that appears above a page when you click a component. For example, a popover might display contact information when selecting a persons name in a list.

Before you begin

Role required: admin

Procedure

  1. Navigate to All > Now experience framework > UI Builder.
  2. Open an experience to work in or create an experience by selecting + Create.
    See Configure how users interact with your applications in UI Builder for more information on creating experiences.
  3. Open or create a page variant.
    For more information about how to create a page in UI Builder, see Create a page in UI Builder.
  4. Add a component to your page that you want to trigger a popover, such as a button component.
    See Add and configure components for more information.
  5. Select the Events tab in the configuration panel.
  6. Select + Add event handler.
    Arrow pointing to the add event handler link for the button component.
  7. Select Open Popover.
  8. Select Create a new popover.
    Arrow pointing to the Create a new popover option.
  9. Select Add.
    The popover appears above the stage.
  10. Add components to the popover by selecting the + icon.
    Arrow pointing to the + to add content.
  11. When you finish configuring the popover, close it.

    Notice in the content tree that the popovers you create sit above the body of your page structure.

    Arrow pointing to the custom popover in the content tree.
  12. Click Save.
  13. Select Preview in the UI Builder header.
  14. Click on the button to test the popover.