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="wele">
                    <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/wele/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:

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

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="wele">
                    <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/wele/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:

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

• javascript
• jquery
• twitter-bootstrap
• popover

• Any errors? Are you sure its even calling in the js fie? – im_benton Commented Feb 24, 2013 at 17:38
• i don't receive any error msg in my firebug – Jean Y.C. Yang Commented Feb 24, 2013 at 17:40
• you can see whole code on my web, just at the top of content of this question – Jean Y.C. Yang Commented Feb 24, 2013 at 17:41
• One thing is your Image is not found.. – im_benton Commented Feb 24, 2013 at 17:49
• the img dosen't matter... – Jean Y.C. Yang Commented Feb 24, 2013 at 17:50

3 Answers 3

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

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"

You must apply the popover function to the button, not the content.

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

This still doesn't pletely solve the problem, since you haven't associated your content div with this button, but it's a start.

UPDATE: After gaining a better understanding of what the OP is after, I think it could be acplished simply by showing the popover after it's initialized:

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

This is a very roundabout way to do nothing more than style an element like a popover, however. It should really be done with CSS alone.