Bootstrap表格单元格中的链接内的弹出窗口不显示

我在悬停操作的表格单元格中有一个链接，我想要一个Bootstrap弹出窗口出现。截至目前，我无法让这个工作正常。Bootstrap表格单元格中的链接内的弹出窗口不显示

这里是代码片段：

<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>内<a>标签，但它仍然不会显示酥料饼。

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

来源

2017-07-07 Dan

倘使你的提琴includ ed the libraries .... – epascarello

我的歉意 - 只是添加了CSS。 – Dan

我已经包括引导和JQuery到的jsfiddle，本身作品酥料饼的，问题是，你看不到它（因为它没有称呼）我已经添加一个虚拟文本，看看popover工程 - https://jsfiddle.net/km7pn81z/9/。您也可以删除data-template以查看它是否有效。

只需添加这个CSS，使其更加醒目：

.mainViewPopover{ 
    background: black; 
}

来源

2017-07-07 15:34:00

我复制你的代码和它的作品对我来说没有数据内容。我包括bootstrap css库，jQuery和bootstrap js库（imp for popover工作）。

这里是链接： 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" }); });

来源

2017-07-07 15:35:37 novembersky

您使用了错误的语法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>

来源

2017-07-07 15:45:59 DavidDomain

Bootstrap表格单元格中的链接内的弹出窗口不显示

回答

相关问题