Question

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

<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事件提供了有用的参数：

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

运作良好....

新年快乐！

安东

引导弹出窗口的动态变化

1 个答案: