jquery - Bootstrap popover 出现在与其触发器不同的元素上

Question

我希望弹出窗口出现在另一个元素上而不是触发器上。目前我有:

 $triggerElement.popover({
                title: varTitle,
                content: varContent,
                html: true,
                placement: 'auto top',
                trigger: 'manual'
            });
..........
<div class="shopper"></div> 

<button type="button" class="btn btn-primary">Add</button>

目前弹出窗口正确触发(按钮单击事件)并位于页面底部。但是，我希望将位置设置为 div“购物者”(div 底部)的右上角元素。这可能与选择器有关，还是您可以帮助我使用 CSS。

按钮触发当前在按钮上方绘制的弹出框。但我想将弹出窗口绘制在购物者 div 标签的正下方。因此，购物者 div 标签将成为触发因素。

Answer 1

如果我明白你想要什么，你需要像这样手动显示/隐藏弹出窗口..

$('.shopper').popover({
  title: "varTitle",
  content: "varContent",
  html: true,
  placement: 'bottom',
  trigger: 'manual'
});

$('#trigger').click(function(){
  $('.shopper').popover('toggle');
});

演示:http://www.bootply.com/7oM1aoycIi