為什么我的bootstrap popover沒有顯示？

Question

我在bootstrap中創建了一個靜態popover ，但它不起作用

一些HTML代碼：

<div class="container row-fluid" >
<div class="span8 offset2">
    <div class="hero-unit">
        <h1 class="hidden-phone">Heading</h1>
        <div class="row-fluid">
            <div class="span5" style="margin-top:30px;">
                <div class="popover left" id="welcome">
                    <div class="arrow"></div>
                    <h3 class="popover-title">To ALL:</h3>
                    <div class="popover-content">
                        <p>count and</p>                
                        <p>。。。</p>  
                    </div>
                </div>
            </div>
            <div class="span6">
                <img src="img/welcome/1.jpg" class="img-circle img-polaroid pull-right hidden-phone" />
            </div>
        </div>
        <a class="btn btn-primary btn-large" href="#">TEST NOW!</a>
    </div>
</div>

我所有的js代碼：

$('#welcome').popover();

Answer 1

我給出了一個示例代碼。

HTML：

<span class="giverscore_tooltip">Example</span>

JS：

jQuery(document).ready(function() {
     $('.giverscore_tooltip').popover({
        trigger:'hover',
        content:'write a review, create a keyword, invite a friend, and more.',
        placement:'top'
    });
 });

Answer 2

我可以看到，出了什么問題。 當您在按鈕上創建彈出窗口時，將生成您引用的代碼。

檢查JS小提琴工作按鈕Jsfiddle你可以編輯

檢入瀏覽器瀏覽器並測試按鈕

第1節：

<div class="popover left" ">
                <div class="arrow"></div>
                <h3 class="popover-title">To ALL:</h3>
                <div class="popover-content">
                    <p>count and</p>                
                    <p>。。。</p>  
                </div>
              </div>

因此，例如，您想要在彈出窗口中創建上述內容，您必須執行以下操作：

<a id="pop" title="" data-content="<p>Content and</p><p> Vivamus sagittis lacus vel augue laoreet rutrum faucibus.</p>" data-placement="left" data-toggle="popover" class="btn" href="#" data-original-title="Popover on left" data-html="true">Try me</a>

因此，當您單擊此按鈕時，將生成第1部分中的上述代碼。 還要記住，如果你想使用html內容設置data-html="true"

Answer 3

您必須將彈出功能應用於按鈕，而不是內容。

$('.btn').popover();

這仍然無法完全解決問題，因為您沒有將此內容div與此按鈕相關聯，但這是一個開始。

更新：在更好地理解OP之后的內容之后，我認為可以通過在初始化之后顯示popover來完成：

$(div#welcome').popover();
$('div#welcome').show();

然而，這是一種非常迂回的方式，除了設置像彈出窗口之類的元素之外什么都不做。 它應該只用CSS來完成。