in bootstrap popovers, how to obtain content from the results of a function

Question

Maybe I'm not used to using functions, but I'm having trouble getting bootstrap popovers to return a string derived from a function. Can anyone help please?

$(".person").popover({
        title: 'Default title value',
        trigger: 'hover',
        html: true,
        content: function(){
            var thisID = $(this).attr('id');

                $.ajax({
                type: 'GET',
                url: "people.xml",
                dataType: "xml",
                success: function(xml) {
                    var xmlID = $(xml).find("id"); 
                    $(xmlID).each(function(id, item) {
                        if ($(item).text() == thisID) { 
                            console.log($(item).parent().find('name').text()); //this is the correct name
                            return $(item).parent().find('name').text(); //but nothing appears in the popover content

                        }
                    });
                }
            });
        }
    });

Answer 1

I abandoned the idea of using xml and just used arrays instead:

$(".person").popover({
        title: function(){
            var thisID = $(this).attr('id');console.log(thisID);
            thisID = thisID.replace("num","");console.log(thisID);
            return arrNames[thisID];
        },
        trigger: 'hover',
        html: true,
        content: function(){
            var thisID = $(this).attr('id');
            thisID = thisID.replace("num","");
            return arrTitles[thisID];
        }
    });