Javascript 在两条线路上使用Bootstrap 3 popover时位置错误

我试图使用Bootstrap的popover在html页面中显示有关段落某些部分的更多信息

为了实现这一点，我使用了一个跨度，悬停时会出现一个弹出框：

<p class="container">
    Lorem ipsum <span class="pop" data-content="Popover">dolor sit amet</span>laborum.
</p>

只要创建popover的跨距在同一条线内，即popover正确居中，该功能就可以正常工作。但是，如果跨度跨越两行，则popover不会出现在跨度上方。我正在寻找一种方法来按预期修复此行为，即始终将popover放在跨度的顶部，即使它跨越两行

---

您可以在这里看到这种行为的一部分（悬停在突出显示的文本上）：

它只是缺少css而已。这是你最新的小提琴

$（文档）.ready（函数（）{
$（'.pop'）。每个（函数（）{
变量$elem=$（本）；
$elem.popover({
位置：'顶部'，
触发器：“悬停”，
是的，
集装箱：$elem，
动画：没错，
标题：“”，
内容：“这是popover内容。你应该可以将鼠标移到这里。”，
延迟：{
“显示”：0，
“隐藏”：300
}
});
});
});
正文{
利润率：200px 50px；
}
流行音乐{
边界半径：0.3em；
背景色：rgba（50,230,50,0.5）；
}
我错了{
背景色：rgba（230,50,50,0.5）；
}
.集装箱{
宽度：750px；
}
我错了{
背景色：rgba（230,50,50,0.5）；
显示：内联块；
}

知识是一种美德，是一种美德，是一种美德，是一种美德。但是，我们必须尽可能少地进行实验
从一个普通的消费品中购买。两人或两人在一个无教区的房间里互相指责。圣奥凯卡除外
丘比特并不傲慢，必须为自己的行为负责。

$('.pop').popover({
        placement: 'top',
        trigger: 'hover',
        html: true,
        animation: true,
        title: '',
        content: 'This is the popover content.',
        delay: {'show' : 0, 'hide' : 300}
});