ブートストラップテーブルセル内のリンク内のポップオーバーは表示されません

Question

テーブルセル内には、ホバーアクションで、ブートストラップポップオーバーを表示するリンクがあります。今のところ、私はこれが正しく動作するようにすることはできません。ここで

は、コードスニペットです：

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

Answer 1

私は私がきた問題は、（それがスタイルされていないため）あなたがそれを見ていないということです、ポップオーバー自体は動作しますが、jsfiddleにブートストラップとjQueryを含めましたダミーのテキストを追加して、ポップオーバーが動作することを確認しました。 - https://jsfiddle.net/km7pn81z/9/。 data-templateも削除して動作することがあります。

ちょうどそれをより見やすくするために、このCSSを追加します。

.mainViewPopover{ 
    background: black; 
} 

Answer 2

私はあなたのコードを複製し、それがデータコンテンツなしで私のために動作します。 私はブートストラップのCSSライブラリ、jQueryとブートストラップ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>