CSSブートストラップで複数のポップオーバーの位置が異なる

Question

呼び出されるたびにポップオーバーの位置を変更できるかどうかは疑問でした。私は画像の上にマウスを置いたときにそれらを使用し、横に2枚の写真があるので、最初の写真のマージンを設定すると、2番目のポップオーバーが遠すぎます。これは私がポジショニングを変更するために使用するものです。

popover.right{ 
    margin-left: 50px; 
} 

example1 example2

あなたは50pxが多すぎるとポップオーバーが遠く右私のメニューのボーダーよりも表示され見ることができるように。私は彼らが同じ垂直線に表示されるように作成されるたびに私のポポバの位置を変更することが可能かどうかを知りたいです。ここ

は、コードの一部です： HTML：

<table> 
       <tr> 
        <td><a rel="popover" data-img="nuotraukos/cluemaps/Map_clue_McGrubors.png" ><div><img class="mapFoto" src = "nuotraukos/cluemaps/Map_clue_McGrubors.png" onClick = "onClick(0,0)"></div></a></td> 

        <td><a rel="popover" data-img="nuotraukos/cluemaps/Map_clue_McGrubors.png" ><div><img class="mapFoto" src = "nuotraukos/cluemaps/Map_clue_McGrubors.png" onClick = "onClick(15,15)"></div></a></td> 
       </tr> 
       <tr> 
        <td><a rel="popover" data-img="nuotraukos/cluemaps/Map_clue_McGrubors.png" ><div><img class="mapFoto" src = "nuotraukos/cluemaps/Map_clue_McGrubors.png" onClick = "onClick(0,0)"></div></a></td> 

        <td><a rel="popover" data-img="nuotraukos/cluemaps/Map_clue_McGrubors.png" ><div><img class="mapFoto" src = "nuotraukos/cluemaps/Map_clue_McGrubors.png" onClick = "onClick(0,0)"></div></a></td> 
       </tr> 
      </table> 

JS：

$('a[rel=popover]').popover({ 
    html: true, 
    trigger: 'hover', 
    placement: 'right', 
    content: function(){return '<img src="'+$(this).data('img') + '" style=\'width:100%\' />';} 
}); 

はCSS：

.popover.right { 
    margin-left: 50px; 
} 

Answer 1

私はあなたのコード内でより多くのパラメータに言及する必要があると思います。より詳しい情報についてはthisをチェックしてください。ここ それについて：Link

はそれが助けを願って、