bootstrap 弹窗的动态变化

Question

我用的是visjs的网络canvas。单击其中一个节点时，我想显示一个 bootstrap 弹出窗口，其中包含有关该节点的一堆信息。我尝试将弹出窗口属性添加到网络控件：

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

并处理来自 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');
        }
    });
}

但是弹出窗口位于屏幕的右边缘。

我做错了什么？

干杯

Answer 1

好的，这是我最终想出的解决方案：

<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>

网络的onClick事件canvas提供了有用的参数：

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');
}

效果不错....

新年快乐！

安东

bootstrap 弹窗的动态变化

Dynamic change of bootstrap popover

dynamic

twitter-bootstrap-3

popover

vis.js