bootstrap popover 的动态变化答案

【问题标题】：Dynamic change of bootstrap popoverbootstrap popover 的动态变化
【发布时间】：2017-05-07 20:42:56
【问题描述】：

我正在使用 visjs 的网络画布。单击其中一个节点时，我想显示一个引导弹出窗口，其中包含有关该节点的一堆信息。我尝试将弹出框属性添加到网络控件：

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

但弹出框位于屏幕的右边缘。

我做错了什么？

干杯

【问题讨论】：

标签： dynamic twitter-bootstrap-3 popover vis.js

【解决方案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事件提供了有用的参数：

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

效果很好....

新年快乐！

安东

【讨论】：