Question

我在表格单元格中有一个链接，在悬停动作上，我想要一个Bootstrap Popover出现。截至目前，我无法使其正常工作。

以下是代码段：

<div id="container" class="no-panel">
  <div id="panel">
    <!-- Can be any DOM with arbitrary, variable height. 
         120px is hardcoded only for the demo. -->
    <div style="height: auto">Some Contents<br/>Some more contents</div>
  </div>
  <div id="contents">
    <!-- Can be any DOM with arbitrary, variable height. 
         300px is hardcoded only for the demo. -->
    <div style="height: auto">Some Contents</div>
  </div>
</div>

我尝试在<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>标记内放置一个<span>，但它仍然不会显示弹出框。

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

Answer 1

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

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

.mainViewPopover{
  background: black;
}

Answer 2

我复制了你的代码，它适用于没有数据内容的我。我包括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>

JS

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

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

表单单元格中链接内的Bootstrap Popover不会显示

3 个答案: