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

我可以看到，出了什么问题。当您在按钮上创建弹出窗口时，将生成您引用的代码。

使用工作按钮Jsfiddle you can edit

检查JS小提琴

检入浏览器Browser and test the button screenshot of html generated

第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();

然而，这是一种非常迂回的方式，除了使用像popover这样的元素之外，什么都不做。它应该只用CSS来完成。

为什么我的bootstrap popover没有显示？

3 个答案: