Why my bootstrap popover doesn't show?

Question

I create a static popover in bootstrap, but it doesn't work

some of the html code:

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

all of my js code:

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

Solution 1

I am giving an example code.

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'
    });
 });

Solution 2

I can see , what went wrong . The code you are referring to is generated when you create a popover over a button .

Check JS fiddle with working button Jsfiddle you can edit

Check in browser Browser and test the button

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

So for example you want to create the above content in a popover , you will have to do the following :

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

So when you will click this button the above code in section 1 will generate . Also remember if you want to use html content set data-html="true"

Comments

[Jean Y.C. Yang]

plz look at this: twitter.github.com/bootstrap/javascript.html#popovers official website said that it can be static and no need to bind to a button

[isherwood]

I'm very familiar with that page, and I don't see anything like what you have.

[isherwood]

I think I see where you're misunderstanding that page. The static popovers are there to show you what popovers look like, not how to implement them. Ignore the code used for those and look at the actual techniques below.

[isherwood]

Here's the crucial bit: "No markup shown as popovers are generated from JavaScript and content within a data attribute."

[Jean Y.C. Yang]

the content of popover has even been hidden, you can see the code. Crtl-U

[Jean Y.C. Yang]

if so, what can the example page shows the popover and it is static?