dynamically creating a popup in jquery mobile

Question

I am attempting to dynamically create popup tooltips with minimal markup (as there will be a lot of them in the end).

In my markup I have <div id='help_roles-description'>...</div>

I make an ajax call to the server to retrieve the helptexts and process them like this:

// If there are helptext updates, setup them accordingly
if (typeof response.helptexts != "undefined") {
    for (var i = 0; i < response.helptexts.length; i++) {
        if(response.helptexts[i].html.length) {
            var help_label = $("#help_" + response.helptexts[i].id + "");
            if(help_label) {
                // First of call, create the popup
                help_label.closest('div[data-role=dialog]').append($("<div></div>")
                        .attr("id", "#helptext_" + response.helptexts[i].id + "")
                        .attr("data-role", "popup")
                        .addClass("ui-content")
                        .html(response.helptexts[i].html)
                        .trigger("create")
                        );

                // Store the html DOM that is inside the label, so we can wrap it in an anchor
                var html = help_label.html();
                help_label.empty();
                help_label.append($("<a></a>")
                        .attr("href", "#helptext_" + response.helptexts[i].id)
                        .attr("data-rel", "popup")
                        .addClass("helper_link")
                        .html(html)
                        );

                // Output happyness
                logger("Setting help for '" + "#helptext_" + response.helptexts[i].id + "" + "' to '" + response.helptexts[i].html+ "'");
            }
        }
    }
}

In one example an id is roles-description . I do not get a div created with the id helptext_roles-description , populated with the html in the response as I expected, Instead I get this:

<div style="display: none;" id="#helptext_roles-description-placeholder">
    <!-- placeholder for #helptext_roles-description -->
</div>

I have tried googling this but there seems to a woeful lack of things with my search terms, and searching placeholders brings back lots of stuff on inputs.

Where I use the closest('div').prepend I have tried appending, pre and appending directly to the help_label , and doing it to help_label.parent()

I have even taken out the .html, and .trigger bits to be outside the creation process.

I also tried creating the div with the id like this $("<div id='... but I always only get the placeholder.

What am I doing wrong?

Answer 1

Based on the comments by @Omar above i did a little more digging.

Even though you can specifically write the HTML markup to work fine with a dialog, the attr("data-rel", "popup") and $.popup() have something special in them that stops this form working unless there is a parent with data-role="content" . Since dialogs have a data-role='main' You cannot programmatically create popups to use as tooltips in a dialog.

I have currently resorted to using the title attribute of a span not an anchor in my text above.

It's unfortuante that this cannot be handed within jquery, but adding qtip makes these work a whole lot better.