javascript - bootstrap 3 popover on container div - Stack Overflow

admin管理员组

文章数量:1336209

I'm trying to create a popover that appears next to a certain <div> - not the <div> containing the popover trigger.

According to the bootsrap documentation, this can be achieved by setting the 'container' option.

Here is jsfiddle: jsfiddle

Here's my html:

Click on button to see Popover

<a href="#" id="" class="btn btn-primary"
    data-toggle="popover"
    data-container="#greendiv"
    data-original-title="Title"
    data-content="This is the body of Popover"
    data-placement="right"  >pop
</a>
<div id="reddiv" style='background:red;width:100px;height:100px;'>  
    red div 
</div>
<div id="greendiv" style='background:green;width:100px;height:100px;' >
    green div <br>
    I want popover to appear here to the right: 
</div>

and js:

$(function () { 
    $("[data-toggle='popover']").popover();   
});

Popover appears, but alongside the trigger div not the div I want it to. Any ideas weled as to why this doesn't work for me ?

I'm trying to create a popover that appears next to a certain <div> - not the <div> containing the popover trigger.

According to the bootsrap documentation, this can be achieved by setting the 'container' option.

Here is jsfiddle: jsfiddle

Here's my html:

Click on button to see Popover

<a href="#" id="" class="btn btn-primary"
    data-toggle="popover"
    data-container="#greendiv"
    data-original-title="Title"
    data-content="This is the body of Popover"
    data-placement="right"  >pop
</a>
<div id="reddiv" style='background:red;width:100px;height:100px;'>  
    red div 
</div>
<div id="greendiv" style='background:green;width:100px;height:100px;' >
    green div <br>
    I want popover to appear here to the right: 
</div>

and js:

$(function () { 
    $("[data-toggle='popover']").popover();   
});

Popover appears, but alongside the trigger div not the div I want it to. Any ideas weled as to why this doesn't work for me ?

• javascript
• jquery
• html
• css
• twitter-bootstrap

Share Follow edited Nov 19, 2015 at 12:55 Paulie_D 115k1313 gold badges166166 silver badges184184 bronze badges asked Nov 19, 2015 at 12:42 Simon SaysSimon Says 4111 silver badge55 bronze badges 2

• jsfiddle/sv6xd2py/4 – Simon Says Commented Nov 19, 2015 at 12:49
• Thanks for all responses. I was trying to find a solution using data-* attributes as it is easier for my php logic. It would seem not to be possible without additional javascript ? Also I clearly misunderstood the container option as pointed out by Krupesh,JesseEarley and timgvandijk. – Simon Says Commented Nov 19, 2015 at 15:28

Add a ment  | 

5 Answers 5

Sorted by: Reset to default 2

As per i know meaning of container is to Appends the popover to a specific element container like body. so it affect when you scroll the page. that means container option is used to set static or dynamic possition of popover while scrolling.

for the functionality that you want please try the following code

$(function() {
  $("#test").click(function() {
    $("[data-toggle='popover']").popover('toggle');
  });
});

#greendiv {
    background:green;width:100px;height:100px;
}

<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://netdna.bootstrapcdn./font-awesome/3.2.1/css/font-awesome.min.css" rel="stylesheet" />
<script src="https://netdna.bootstrapcdn./bootstrap/3.0.0/js/bootstrap.min.js"></script>
<link href="https://netdna.bootstrapcdn./bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" />
<a href="#" id="test" class="btn btn-primary">pop
</a>
<div id="reddiv" style='background:red;width:100px;height:100px;'>
  red div
</div>
<div id="greendiv" data-toggle="popover" data-original-title="Title" data-content="This is the body of Popover" data-placement="right">
  green div
  <br>I want popover to appear here to the right:
</div>

The right way is to add data-* attributes to the element you want popover append to. See working jsfiddle

HTML

<a href="#" id="" data-toggle="popover" class="btn btn-primary">pop</a>

<div id="greendiv"
   data-original-title="Title"
   data-content="This is the body of Popover"
   data-placement="right"
     style='background:green;width:100px;height:100px;' >
    green div <br>
    I want popover to appear here to the right: 
</div>

Javascript

$(function () { 
    $("[data-toggle='popover']").on('click', function(e) {
        $('#greendiv').popover('toggle');
    }); 
});

As alternative, you can use options for popover() plugin instead of data-* attributes. The official documentation will help you http://getbootstrap./javascript/#popovers

Looking at your Fiddle, the popover is functioning correctly, you're misinterpreting what "data-container" is doing. If you look at your Fiddle and view the source (I'm using Firebug), you will see that once you click "pop", that the popover does in fact attach itself to the #greendiv, it gets appended below the text you placed inside it.

Per the Bootstrap documentation:

Appends the popover to a specific element. Example: container: 'body'. This option is particularly useful in that it allows you to position the popover in the flow of the document near the triggering element - which will prevent the popover from floating away from the triggering element during a window resize.

This doesn't say it changes the location of the popover.

That's not what the container attribute is for. To see the container attribute in action, you can check this fiddle by Rowan Freeman. Switch out the two lines and scroll up and down to see the difference.

To achieve your desired behaviour, you have to put the popover-related data attributed on the #greendiv element and do something like

$(function () { 
    $('.popover-trigger').on('click', function() {
        $('#greendiv').popover('show');
    }); 
});

See this fiddle for a plete example.

I bound click-'toggle' to the button and used popover-settings at the greendiv. Here is an example: DEMO-JSFIDDLE

$(function () {
    $("#popThis").on("click", function(){
        $('#greendiv').popover('toggle');
    });

    $('#greendiv').popover({
        title: "Title",
        content: "This is the body of Popover",
        placement:"right",
        trigger: 'manual'
    });
});

本文标签： javascriptbootstrap 3 popover on container divStack Overflow