<!-- https://abap2ui5.github.io/docs/cookbook/popup_popover/popover -->

# Popover

To show a popover, call `client->popover_display` and pass the ID of the control the popover should attach to:
```abap
CLASS z2ui5_cl_sample_popover DEFINITION PUBLIC.

  PUBLIC SECTION.
    INTERFACES z2ui5_if_app.

  PROTECTED SECTION.
  PRIVATE SECTION.
ENDCLASS.

CLASS z2ui5_cl_sample_popover IMPLEMENTATION.
  METHOD z2ui5_if_app~main.

    IF client->check_on_navigated( ).
      DATA(view) = z2ui5_cl_ui5_view_builder=>factory(
          )->ele( n = `View` ns = `mvc`
              )->a( n = `xmlns`     v = `sap.m`
              )->a( n = `xmlns:mvc` v = `sap.ui.core.mvc`

              )->ele( `Shell`
                  )->ele( `Page`
                      )->a( n = `title` v = `Popover Example`

                      )->tag( `Button`
                          )->a( n = `id`    v = `TEST`
                          )->a( n = `text`  v = `display popover`
                          )->a( n = `press` v = client->_event( `POPOVER_OPEN` ) ).

      client->view_display( view->stringify( ) ).

    ENDIF.

    CASE client->get( )-event.

      WHEN `POPOVER_OPEN`.
        DATA(popover) = z2ui5_cl_ui5_view_builder=>factory(
            )->ele( n = `FragmentDefinition` ns = `core`
                )->a( n = `xmlns`      v = `sap.m`
                )->a( n = `xmlns:core` v = `sap.ui.core`

                )->ele( `Popover`
                    )->a( n = `placement` v = `Left`

                    )->tag( `Text`
                        )->a( n = `text` v = `this is a popover`
                    )->tag( `Button`
                        )->a( n = `id`    v = `my_id`
                        )->a( n = `text`  v = `close`
                        )->a( n = `press` v = client->_event( `POPOVER_CLOSE` ) ).

        client->popover_display(
            xml   = popover->stringify( )
            by_id = `TEST` ).

      WHEN `POPOVER_CLOSE`.
        client->popover_destroy( ).
    ENDCASE.

  ENDMETHOD.
ENDCLASS.
```

Like popups, a popover picks up changed ABAP values on its own: the framework compares the model before and after `main( )` and pushes the difference into the open popover, without re-rendering its XML. A handler that only changes data has nothing else to call.

<!-- samples:start (generated by scripts/link-samples.mjs — do not edit) -->

## Working Samples

Complete apps from the [sample catalog](https://github.com/abap2UI5/samples/blob/main/SAMPLES.md)
that use what this page describes. Each is a single class — pull the repository with
[abapGit](https://abapgit.org) and start it with `?app_start=<class>`.

| Sample | Class |
|---|---|
| Basic Example with Placement | [`Z2UI5_CL_SMP_APP_026`](https://github.com/abap2UI5/samples/blob/main/src/01/z2ui5_cl_smp_app_026.clas.abap) |
| Open from a Table Row | [`Z2UI5_CL_SMP_APP_052`](https://github.com/abap2UI5/samples/blob/main/src/01/z2ui5_cl_smp_app_052.clas.abap) |
| Select from a List | [`Z2UI5_CL_SMP_APP_081`](https://github.com/abap2UI5/samples/blob/main/src/01/z2ui5_cl_smp_app_081.clas.abap) |
| QuickView Contact Card | [`Z2UI5_CL_SMP_APP_109`](https://github.com/abap2UI5/samples/blob/main/src/01/z2ui5_cl_smp_app_109.clas.abap) |
| Toggle by ID (toggleBy) (A) | [`Z2UI5_CL_SMP_APP_465`](https://github.com/abap2UI5/samples/blob/main/src/01/z2ui5_cl_smp_app_465.clas.abap) |
| Open Together with the View Build | [`Z2UI5_CL_SMP_APP_490`](https://github.com/abap2UI5/samples/blob/main/src/01/z2ui5_cl_smp_app_490.clas.abap) |

<!-- samples:end -->