---
sourceDocument: Australia Build or modify applications
sourceDocumentLink: https://www.servicenow.com/docs/r/application-development

 Release :

    - australia

ft:locale :

    - en-US

ft:publication_title :

    - Australia Build or modify applications

ft:clusterId :

    - cadev

bundleId :

    - cadev

workflow :

    - Development, Data, and Analytics


---

# Create popovers in UI Builder

# Create popovers in UI Builder {#ariaid-title1}

Release version: Australia  
Updated March 12, 2026  
![](https://www.servicenow.com/docs/portal-asset/ico-clock) 1 minute to read  
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](https://www.servicenow.com/docs/GMNWDWEn_usF5HlXYGngCw "An event mapping in UI Builder is the process that enables you to map an event's payload or contextual values to the object or handler that acts on that event. The four event types are: component, page, data resource, and declarative action.").
Figure 1. Informational popover

## Add popover to a UI Builder page {#ariaid-title2}

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 AllNow experience frameworkUI Builder.
2. Open an experience to work in or create an experience by selecting CreateExperience.  
   See [Configure how users interact with your applications in UI Builder](https://www.servicenow.com/docs/xRTj74jSaNpx1gbYEFN~zw "Learn what an experience is in UI Builder. Understand what an experience contains.") 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](https://www.servicenow.com/docs/gGPA7eivyM0RFTMUEX~LWw "Create a page in UI Builder for a portal, workspace, or custom application so that you can build a web experience for your users.").
4. Add a component to your page that you want to trigger a popover, such as a button component.  
   See [Add and configure components](https://www.servicenow.com/docs/S25G6VJ3jD8Bu7gj_TwOLA#add-components "Learn how to add components to your page in UI Builder. A page is built by adding components.") for more information.
5. Select the Events tab in the configuration panel.
6. Select + Add event handler.  
7. Select Open Popover.
8. Select Create a new popover.  
9. Select Add.  
   The popover appears above the stage.
10. Add components to the popover by selecting the + icon.  
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.
12. Click Save.
13. Select Preview in the UI Builder header.
14. Click on the button to test the popover.

*[\>]: and then