One of the important issue I found is notification type. Based on same notification type, I want to display 3 different kinds of note. This Notification type is passed to the JavaScript function which creates the note. The same notification type is used during the onAttached event. See the PopupOpen JavaScript function. Control properties come from the parameters name, for example data-tchmi-popupnotificationmessag (in the code below) is notification message parameter all in small font.

        popupParametersPopupControl['data-tchmi-height'] = Height;
        popupParametersPopupControl['data-tchmi-width'] = Width;
        popupParametersPopupControl['data-tchmi-zindex'] = "1000";
        popupParametersPopupControl['data-tchmi-notificationtype'] = NotificationType;
        popupParametersPopupControl['data-tchmi-popupnotificationdevicename'] = Header;
        popupParametersPopupControl['data-tchmi-popupnotificationmessage'] = Message;

Following is the complete function that does the magic. Read the comment in the code to make it clear.

(function (TcHmi) {
    var PopupOpen = function (Content,Header,Message,NotificationType,HorizontalAlignment,VerticalAlignment,HorizontalDistance,VerticalDistance,Height,Width,WhereToInsert,AddWhereclicked) {
        if (TcHmi.Controls.get(String('PopupInstance'+Content)) || Content == null) {
            return;
        }
        var PopupUuid = String("Popup_" + TcHmiExampleCollection.Utilities.generateUuidv4());
        var PopParameterStartIndex;
        var popupParametersPopupControl = [];
        var PopParameters = [];
        var popup;
        var popupType = Content.split(".");
        popupType = popupType[popupType.length - 1].toLowerCase();
        if (Content == undefined) { Content = "" }
        if (HorizontalAlignment == undefined) { HorizontalAlignment = "Top" }
        if (VerticalAlignment == undefined) { VerticalAlignment = "Left" }
        if (HorizontalDistance == undefined) { HorizontalDistance = 0 }
        if (VerticalDistance == undefined) { VerticalDistance = 0 }
        if (Height == undefined) { Height = 100 }
        if (Width == undefined) { Width = 100 }
        if (WhereToInsert == undefined) { WhereToInsert = "Desktop" }
        if (HorizontalAlignment == 'Left') {
            popupParametersPopupControl['data-tchmi-left'] = HorizontalDistance;
        }
        else if (HorizontalAlignment == 'Center') {
            TcHmi.Log.warn('Please use left/right');
        }
        else if (HorizontalAlignment == 'Right') {
            popupParametersPopupControl['data-tchmi-right'] = HorizontalDistance;
        }
        if (VerticalAlignment == 'Top') {
            popupParametersPopupControl['data-tchmi-top'] = VerticalDistance;
        }
        if (VerticalAlignment == 'Middle') {
            TcHmi.Log.warn('Please use left/right');
        }
        if (VerticalAlignment == 'Bottom') {
            popupParametersPopupControl['data-tchmi-bottom'] = VerticalDistance;
        }
        /// For clicking consider using the following code
        if (AddWhereclicked == true) {
            popupParametersPopupControl['data-tchmi-left'] = TcHmiExampleCollection.Utilities.ClickPressCoordinates.x;
            popupParametersPopupControl['data-tchmi-top'] = TcHmiExampleCollection.Utilities.ClickPressCoordinates.y;
        }
        /// For automatic notification generating use the following code that will read a control and set the note
        //Read the location of the circle and position the note to right place
        switch (NotificationType) {
            case 1:
                var targetControlCircleAlarm = TcHmi.Controls.get("TcHmiEllipse_Alarm");
                if (targetControlCircleAlarm != undefined) {
                    var top = targetControlCircleAlarm.getTop();
                    var left = targetControlCircleAlarm.getLeft();
                    popupParametersPopupControl['data-tchmi-left'] = left;
                    popupParametersPopupControl['data-tchmi-top'] = top-25;
                }
                break;
            case 2:
                var targetControlCircleWarning = TcHmi.Controls.get("TcHmiEllipse_Warning");
                if (targetControlCircleWarning != undefined) {
                    var top = targetControlCircleWarning.getTop();
                    var left = targetControlCircleWarning.getLeft();
                    popupParametersPopupControl['data-tchmi-left'] = left;
                    popupParametersPopupControl['data-tchmi-top'] = top-25;
                }
                break;
            case 3:
                var targetControlCircleInfo = TcHmi.Controls.get("TcHmiEllipse_Info");
                if (targetControlCircleInfo != undefined) {
                    var top = targetControlCircleInfo.getTop();
                    var left = targetControlCircleInfo.getLeft();
                    popupParametersPopupControl['data-tchmi-left'] = left;
                    popupParametersPopupControl['data-tchmi-top'] = top-25;
                }
                break;
            default:
                var targetControlCircleAlarmDefault = TcHmi.Controls.get("TcHmiEllipse_Alarm");
                if (targetControlCircleAlarmDefault != undefined) {
                    var top = targetControlCircleAlarmDefault.getTop();
                    var left = targetControlCircleAlarmDefault.getLeft();
                    popupParametersPopupControl['data-tchmi-left'] = left;
                    popupParametersPopupControl['data-tchmi-top'] = top-25;
                }
        }
        popupParametersPopupControl['data-tchmi-height'] = Height;
        popupParametersPopupControl['data-tchmi-width'] = Width;
        popupParametersPopupControl['data-tchmi-zindex'] = "1000";
        popupParametersPopupControl['data-tchmi-notificationtype'] = NotificationType;
        popupParametersPopupControl['data-tchmi-popupnotificationdevicename'] = Header; // Comes as parameter
        popupParametersPopupControl['data-tchmi-popupnotificationmessage'] = Message;   // Comes as parameter
        var documentSizeX = document.body.clientWidth;
        var documentSizeY = document.body.clientHeight;
        if (popupType == "usercontrol") {
            popupParametersPopupControl['data-tchmi-target-user-control'] = Content;
            popup = TcHmi.ControlFactory.createEx(
            'tchmi-user-control-host',
            PopupUuid,
            popupParametersPopupControl
            );
        }
        else if (popupType == "content") {
            popupParametersPopupControl['data-tchmi-target-content'] = Content;
            popup = TcHmi.ControlFactory.createEx(
            'tchmi-region',
            PopupUuid,
            popupParametersPopupControl
            );
        }
        var targetControlCircle = TcHmi.Controls.get("TcHmiEllipse_UserControl_ShowNote");
        if (targetControlCircle != undefined) {
            console.log("note found");
        }
        var desktop = TcHmi.Controls.get(WhereToInsert.__id);
        if (desktop && popup ) {
            desktop.addChild(popup);
            TcHmiExampleCollection.Utilities.dragElement(document.getElementById(PopupUuid));
        }
        var c = 0;
        var t;
        var timer_is_on = 0;
        function timedCount() {
            c = c + 1;
            t = setTimeout(timedCount, 1000);
            if (c == 10) {
                myStopFunction(); //Reset variables in PLC
                stopCount(); //Destroy the timer and release
            }
        }
        function startCount() {
            if (!timer_is_on) {
                timer_is_on = 1;
                timedCount();
            }
        }
        function stopCount() {
            clearTimeout(t);
            timer_is_on = 0;
            c = 0;
        }
        startCount();
        function myStopFunction() {
            var myoldcontrol = TcHmi.Controls.get(popup.__id).destroy();
            if (myoldcontrol == undefined) {
                console.log("not Found ");
            } else {
                console.log("Found ");
            }
            if (NotificationType == 1) { //Write to the PLC variable to false, it was set true by timer
                TcHmi.Symbol.writeEx('%s%PLC1.MAIN.alarmList%/s%', false, function (data) {
                    if (data.error === TcHmi.Errors.NONE) {
                        console.log("alarmList Write OK");
                    } else {
                        console.log("alarmList Write NOT OK");
                    }
                });
            }
            if (NotificationType == 2) {  //Write to the PLC variable to false, it was set true by timer
                TcHmi.Symbol.writeEx('%s%PLC1.MAIN.warningList%/s%', false, function (data) {
                    if (data.error === TcHmi.Errors.NONE) {
                        console.log("warningList Write OK");
                    } else {
                        console.log("warningList Write NOT OK");
                    }
                });
            }
            if (NotificationType == 3) {  //Write to the PLC variable to false, it was set true by timer
                TcHmi.Symbol.writeEx('%s%PLC1.MAIN.infoList%/s%', false, function (data) {
                    if (data.error === TcHmi.Errors.NONE) {
                        console.log("infoList Write OK");
                    } else {
                        console.log("infoList Write NOT OK");
                    }
                });
            }
        } //myStopFunction
    };    
    TcHmi.Functions.registerFunction('PopupOpen', PopupOpen); //TwinCAT
})(TcHmi); 

Download the sample code Tc HmiPopupTest_Hemelix.zip

If you like this please share it inside your network.