Javascript 表单元格中链接内部的引导弹出框不显示

我在一个表格单元格中有一个链接，在悬停动作中，我希望出现一个引导弹出框。到目前为止，我无法让它正常工作

以下是代码片段：

<table style="background: transparent; border: 0; outline: 0; border-collapse: collapse;">
 <tr style="background: transparent; border: 0; outline: 0;">
  <td style="background: transparent; border: 0; outline: 0; text-align:left; width:100px">
   <a href="#" id="lastBACommentCell" tabindex="0" data-toggle="popover" data-trigger="hover" data-placement="bottom" data-template="<div class='mainViewPopover' role='tooltip'><div class='arrow'></div><div class='popover-content' style='color: #FFFFFF;'></div></div>" data-content="Here is my popover">
    Hover here for the popover to appear...
   </a>
  </td>
 </tr>
</table>
...
    <script type="text/javascript" language="javascript">
     $(document).ready(function() {
      $('#lastBACommentCell').popover();
     });
    </script>

...
$（文档）.ready（函数（）{
$（'lastBACommentCell'）.popover（）；
});

---

我试着在

中放入一个
，我在JSFIDLE中加入了bootstrap和JQuery，popover本身可以工作，问题是您看不到它（因为它没有样式化），我添加了一个虚拟文本，以查看popover是否可以工作-
. 您还可以删除
数据模板
，以查看其是否有效

只需添加此CSS即可使其更加可见：

.mainViewPopover{
  background: black;
}

我复制了你的代码，它在没有数据内容的情况下对我有效。
我包括了引导css库、jQuery和引导js库（用于popover工作的imp）

以下是链接：

代码：
HTML



JS


$（文档）.ready（函数（）{
$（'[data toggle=“popover”]'）。popover（{trigger:“hover”}）；
});
您使用了错误的
数据模板
语法。最外层的包装器元素应具有.popover类。您还在白色背景的元素上使用
style='color:#FFFFFF


…最外层的包装器元素应具有.popover类

因此，在
数据模板
属性中更改以下内容：

<div class='mainViewPopover' role='tooltip'>
  <div class='arrow'></div>
  <div class='popover-content' style='color: #FFFFFF;'></div>
</div>


如果你的小提琴包含了库，那会有帮助的……我的道歉-刚刚添加了CSS。
<div class='mainViewPopover' role='tooltip'>
  <div class='arrow'></div>
  <div class='popover-content' style='color: #FFFFFF;'></div>
</div>

<div class='mainViewPopover popover' role='tooltip'>
  <div class='arrow'></div>
  <div class='popover-content'></div>
</div>