Dynamic popups (“popovers”) on published diagrams

With HTML export, you  can specify any information to show on popup (bootstrap popover)

Firs, simple demo (rectangle):

Live sample: https://cdn.rawgit.com/nbelyh/svgpublishdemo/fa70891f/SimplePopover.html Souce:  SimplePopover.vsd (14.5 KiB)

This is just stock popover. The code just defines a standard bootstrap popover, but for a Visio shape (#shape1).

$("#shape1").popover({
   title: "Hello",
   content: "This is some sample text",
   placement: "top",
   container: "body"
 });

The result might not look that impressive, but I hope it looks clear.

Now let’s go for something more advanced. Lets take stock diagram and show in the popover info about the relevant computer models from the HP website.
Click the image to open it live (again, hosted on GitHub)

Live sample: http://cdn.rawgit.com/nbelyh/svgpublishdemo/d6e40ede/PopoverFrameDemo.html Source:  PopoverFrameDemo.html (93.6 KiB)

The diagram is a data-bound diagram, and each server shape has a link to it’s product page. So when you click it, it shows information about that shape. Note that you can use popovers for arbitrary html contents; that includes links, inputs, forms, etc. The code from the "advanced" sample has a pair of nice features:

• the color and the size of the popup is customized with CSS
• There is highlighting (glow effect) implemented
• The popover is auto-positioned on the screen so that it’s always in the view.
• Dismiss the popover if user clicks outside of it

    // iterate over all shapes
    $.each(diagram.shapes, function (shapeid, shape) {
        
        // get current shape
        var $shape = $("#" + shapeid);

        // get shape properties
        var props = shape.Props;
        
        // create the popover for the shape
        $shape.popover({
            trigger: "click",
            container: "body",
            html: true,
            content: '<iframe src="'+props['Link']+'"/>',
            title: props.Model
        });

        // 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();
        });
        
        // implement "glow" effect on hover
        $shape.on('mouseover', function () {
            $(this).attr('filter', 'url(#hover)');
        });
        
        $shape.on('mouseout', function () {
            $(this).removeAttr('filter');
        });
    });