How to create a popup

[altair]

Hi everyone, I am new here. I am wondering on how  to create a popup like when the user clicked the pin. it will look like this, I used graphic to the map using PictureMarkerSymbol

altair_0-1639380045251.png

     const point = new Graphic({

        geometry: {

          latitude: 95.7129,

          longitude:37.0902,

          type: 'point',

        },

        symbol: LocationPin,

        popupTemplate: {

          title:"",

          actionsMenuEnabled: false,

          content: [{

            type: "text",

            text: "<br><div class=\"popuptemplate\"><u>" + teacher.name + "</u> <br>" +

             "<div class=\"body2\">" + location.address.street1 + ", " + location.address.street2 + "<br>" +

             location.address.city + ", " + location.address.state + " " + location.address.zipCode + "</div></div>"

          }]

        },

[Kishore]

hi @altair , I assume you are adding the graphic to the map using PictureMarkerSymbol you can use attributes and popup template while creating the graphics to display the popup on click. please refer the code below:

var pointGraphic = new Graphic({
                                            geometry: pointGeometry,
                                            symbol: PictureMarkerSymbol,
                                            attributes: {"ID":"0", "Name":"xxx"},
                                            popupTemplate: {
                                                title: "Name",
                                                content: "you can define any object here..."
                                            }
                                        });

Please check the samples & help document at: popup-customcontent 

[altair]

@Kishore hello, thank you for the response, yes i can display the popup, but i want change the behavior on how the popup display, i just want to display the popup just like in the picture

altair_1-1639377036711.png

[Kishore]

@altair  Hi, 

If you are using ESRI popup widget from 4.x, the default CSS details are available at "Popup.scss". you can alter the CSS class locally to overwrite the defaults.

Please share your environment details to understand the requirement.  

[altair]

@Kishore hello,

Yes I am using the ESRI popup, can you please help me on configuring this ?