SvgPublish: Pokemon building demo. Please use with the corresponding diagrams. https://nbelyh.github.io/svgpublishdemo/PokemonBldgPlan.html, http://unmanagedvisio.com/download/svgexportsamples/PokemonBldgPlan.zip

PokemonBldgPlan.vsd.html

<style>
.popover {
    min-width: 400px;
    min-height: 250px;
    max-width: none;
}
.popover img {
    height: 150px;
    width: auto;
    float: left;
    margin-right: 10px;
}
.popover p {
    margin: 0 0 0 170px;
}
</style>

PokemonBldgPlan.vsd.js

$.each(diagram.shapes, function (shapeId, shapeData) {

    var props = shapeData.Props;
    if (!props)
        return;
    
    var $shape = $("#" + shapeId);
    
    // build options for popover: placement function, iframe url from properties
    var options = {
        placement: function (context, source) {
            var position = $(source).position();
            if (position.right > 500)
                return "left";
            if (position.left < 500)
                return "right";
            if (position.top < 300)
                return "bottom";
            return "top";
        },
        trigger: "manual",
        container: "html",
        html: true,
        content: ''+
            '<img src="'+props.Image+'"></img>'+
            '<p>'+
              '<span class="h4"> '+props.Name+'<br/>' +
              '<span class="text-muted small"> ' + props.Title + '</span>' +
            '</p>' +
            '<p><b>Phone:</b> ' + '<a href="callto:'+props['Telephone']+'">'+props['Telephone']+'</a>'+'</p>'+
            '<p><b>E-Mail:</b> ' + '<a href="mailto:'+props['E-Mail']+'">'+props['E-Mail']+'</a>'+'</p>'+
            '<p><b>Responsibilities:</b><br/>' + (""+props.Responsibilities).replace(/(?:\r\n|\r|\n)/g, '<br />') + '</p>',
        title: props.Name
    };

    // create the popover for the shape        
    $shape.popover(options);

    // decorate the shape with "hand" cursor
    $shape.css("cursor", "pointer");

    // hide the popover hiding when clicked outside
    $('body').on('click', function (e) {
        $shape.popover('hide');
    });

    $shape.on('click', function (evt) { 
        evt.stopPropagation();
        $shape.popover('toggle');
    });
     
    $shape.on('mouseover', function () {
        $(this).attr('filter', 'url(#hover)');
    });
     
    $shape.on('mouseout', function () {
        $(this).removeAttr('filter');
    });
    
    $shape.tooltip({
        container: "body",
        title: props.Name
    });
});