How to get KendoPopover to work with jquery.html()

Question

We have an ASP.Net core web application.

We are trying to use the "kendoPopover" to display more information when hovering over some objects on the form.

We can get a basic kendoPopover to work on the page.

The problem we have is that the index.cshtml is building the container object, "myMainContainer", using a javascript function, for displaying on the form. The "myMainContainer" works as we want it to. All the information displays as expected on the form. Except the Popover does not work.

When we hover over the objects, the tooltip displays as normal, but the popover does not display.

If I look at the source code in the browser, I see my container html as expected, but it appears empty, even though everything displays on the browser as expected.

//Here is what my container object looks like when I "View Source" in the browser.
//The objects display on the form, even though the source makes the tag look empty.
 <div id="myMainContainer" style="display: table; margin: 0 auto;"></div>

    

This is how our container object is being built, pseudo code:

    //index.cshtml
    function drawTheMap() {
        ///Do stuff, get tooltips, get text.....
        ///This will create several objects on the form containing text and tooltips
        ///The goal is to display the tooltip of each object in a kendoPopover, when hovering

        ///This is just partial code
        let template = [];
        template.push(`<div class="row-fluid">`);
        for (let x = 0; x <= maxNoOfObjects; x++) {
            template.push(`<div class="myCell" id="myCell">`);
            template.push(`<div class="mynextCell" id="mynextCell" style="background-color:${hex};" title="${tooltip}">`);
            template.push(`<label title="${tooltip}" class="grdCellText">${displayText}</label>`);
            template.push(`</div>`);
            template.push(`</div>`);
        }

        $('#myMainContainer').html(template.join(" "));
    }


    //Here is my popover
    //Normally, the header and body would call kendo.template(), but we are just trying to get anything to work
    $("#myMainContainer").kendoPopover({
        header: "My Header!",
        body: "My Body!",
        filter: "label"
    });

It seems like since the container object "myMainContainer" appears empty in the browser source code, that the kendoPopover has nothing to reference.

How can we get the kendoPopover to work in a situation like the above?