动态生成 jQuery Tooltip 不显示

这个想法是创建一个图像列表，每个图像都有一个包含更大图像的自定义工具提示。这是一个部分“有效”的示例（工具提示出现在悬停时，但添加了 128 像素的图像，为什么？

http://jsfiddle.net/xpvt214o/157904/

for(idx = 0; idx < 2; idx++){
    var tmpImg = $('<img>')
        .attr('src', 'https://www.seoclerk.com/pics/551103-1TOqFD1502285018.jpg')
        .attr('id', idx)
        .attr('title', '')
        .width('32px')
        .height('32px');
    var tmpDivCard = $('<div>')
        .css('position', 'absolute')
        .css('left', 40*idx)
        .css('top', 50)
        .css('zIndex', '1')
        .append(tmpImg); 
    tmpImg.tooltip({ content: '<img src="https://www.seoclerk.com/pics/551103-1TOqFD1502285018.jpg" 			style="width:128px;height:128px;"/>' });
       $('#map_area').append(tmpDivCard);
    }

<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script src="https://code.jquery.com/ui/jquery-ui-git.js"></script>

<div style="">
    <div id="map_area">
        
    </div>
</div>

我的问题是以下代码根本没有显示工具提示，尽管图像在那里。

document.addEventListener('DOMContentLoaded', setProfileCards);

function setProfileCards() {
    //debugger;
    var profileCards = (@Html.Raw(Session["profileCards"] as string));
    profileCards.forEach(function (profileCard) {
        var areaName = profileCard.Place.replace(/\./g, '');
        var _elementArea = $("area[id='" + areaName + "']");
        var _elementHTML = $("area[id='" + areaName + "']")[0];

        if (profileCard.Place.startsWith('3.1')) {
            //
            var tmpImg = $('<img title="">')
                .addClass('rounded-circle')
                .attr('src', profileCard.ProfilePic)
                //.attr('id', areaName)
                //.attr('alt', '')
                //.attr('title', profileCard.Name)
                .attr('title', '')
                .width('32px')
                .height('32px');
            tmpImg.click(function (e) {
                _elementArea.trigger('click');
            });

            var left = (parseInt(_elementHTML.coords.split(',')[2]) + parseInt(_elementHTML.coords.split(',')[0])) / 2;
            var top = (parseInt(_elementHTML.coords.split(',')[3]) + parseInt(_elementHTML.coords.split(',')[1])) / 2;
            var tmpDivCard = $('<div>')
                    .css('position', 'absolute')
                    .css('left', left)
                    .css('top', parseInt(_elementHTML.coords.split(',')[3]))
                    .css('zIndex', '1')
                .append(tmpImg);
            tmpImg.tooltip({ content: '<img src="' + profileCard.ProfilePic + '" style="width:128px;height:128px;"/>' });
            $('#map_area').append(tmpDivCard);
        }
    });
}