Dynamic change of bootstrap popover

Question

I am using the network canvas of visjs. On click of one of the nodes, I would like to display a bootstrap popover containing a bunch of information about that node. I tried adding the popover properties to the network control:

<div id="mynetwork" data-toggle="popover" title="Popover Header" data-content="Some content inside the popover"></div>

and handling the click event from vis:

function doOnClick(params) {
    $('#mynetwork').popover({
        template: '<div id="sys_popover" class="popover timelineItemPopover" role="tooltip" style="top: 376.5px; left: 100px; display: block;"><div class="arrow"></div><div class="popover-head"><a href="#" class="btn btn-sm glyphicon glyphicon-remove-circle popover-close"></a><h3 class="popover-title"></h3></div><div class="popover-content"></div></div>',
        container: false,
        viewport: { selector: '#mynetwork', padding: 20 },
        html: true,
        content: function() {
            return $(this).children('.content').children('span[data-content]').attr('data-content');
        }
    });
}

but the popover is positioned on the right edge of the screen.

What am I doing wrong?

Cheers

Answer 1

Ok, here is the solution I finally came up with:

<div id="mynetwork"></div>
<div class="popover right" role="tooltip">
   <div class="arrow" style="top: 30px"></div>
     <div class="popover-inner">
     <div class="popover-title">My Title</div>
        <div id="systemInfo" class="popover-content">
        </div>
     </div>
   </div>
</div>

The onClick event of the network canvas provides params that are helpful:

function doOnClick(params) {

    var x = params.pointer.DOM.x;
    var y = params.pointer.DOM.y;

    var sSystemTitle = "My Title";
    var sSystemInfo = "Whatever";

    $('.popover').show();

    $('.popover-title').html(sSystemTitle);
    $('.popover-content').html(sSystemInfo);

    $('.popover').css('left', (x + 10) + 'px');
    $('.popover').css('top', (y - 20) + 'px');
}

Works well....

Happy new year!

Anton