CSS引导多个弹出框的不同定位

Question

我想知道是否可以在每次调用弹出框时更改其位置。当我将鼠标悬停在一张图片上时我会使用它们，并且我有两张并排的图片，所以如果我为第一张图片设置边距，那么第二张弹出框看起来太远了。这是我用来改变定位的。

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

希望对您有所帮助；）