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表格單元格中的鏈接內的彈出窗口不顯示

回答

相關問題