ブートストラップポップオーバーの動的変更

Question

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

が、ポップオーバーは、画面の右端に配置されています。

私は間違っていますか？

乾杯

Answer 1

[OK]を、ここで私は最終的に思い付いた解決策は以下のとおりです。

<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イベントが役に立つのparamsを提供しています。

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

はよく作品....

ハッピーニューイヤー！

アントン