表格单元格中链接内的引导弹出窗口不显示答案

【问题标题】：Bootstrap Popover inside of a link in a table cell does not display表格单元格中链接内的引导弹出窗口不显示
【发布时间】：2017-07-07 15:19:46
【问题描述】：

我在悬停动作的表格单元格中有一个链接，我希望出现一个 Bootstrap 弹出框。截至目前，我无法使其正常工作。

这里是sn-p的代码：

<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>

我尝试在<a> 标记内添加<span>，但它仍然不会显示弹出框。

这里是 JSFiddle - https://jsfiddle.net/dzeller44/swnbdjaq/

【问题讨论】：

如果你的小提琴包括图书馆会有所帮助....
抱歉 - 刚刚添加了 CSS。

标签： javascript html bootstrap-popover

【解决方案1】：

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

这里是链接： https://codepen.io/anon/pen/LLJrzJ

代码： HTML

        <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-content="Here is my popover">
        Hover here for the popover to appear...
       </a>
  </td>
 </tr>
</table>

$(document).ready(function() { $('[data-toggle="popover"]').popover({ trigger: "hover" }); });

【讨论】：

【解决方案2】：

我在 jsfiddle 中包含了 bootstrap 和 JQuery，popover 本身可以工作，问题是你看不到它（因为它没有样式）我添加了一个虚拟文本来查看 popover 是否有效 - https://jsfiddle.net/km7pn81z/9/。您还可以删除 data-template 以查看它是否有效。

只需添加此 CSS 以使其更明显：

.mainViewPopover{
  background: black;
}

【讨论】：

【解决方案3】：

您使用了错误的data-template 语法。最外层的包装元素应该有 .popover 类。您还在白色背景的元素上使用了style='color: #FFFFFF。

Bootstrap Popover Options

...最外层的包装元素应该有 .popover 类。

所以在data-template 属性中改变这个：

<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>

$(document).ready(function() {
  $('#lastBACommentCell').popover()
});

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>


<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" 
        role="button" 
        data-trigger="hover" 
        data-placement="bottom" 
        data-content="Here is my popover" 
        data-template="<div class='mainViewPopover popover' role='tooltip'><div class='arrow'></div><div class='popover-content'></div></div>" >
        Hover here for the popover to appear...
      </a>
    </td>
  </tr>
</table>

【讨论】：