CODEWITHSUNDEEP
jqueryhtmltwitter-bootstrapaccordionpopover
Ahmet
Ahmet

Reputation: 1445

Bootstrap popover on moving elements

I am trying to use a static popover on an element whose position may change by accordion. However the popover stays at the same place when accordion is activated. How can I enable popover to change its position accordingly ?

Here is the related code:

(on JsFiddle: http://jsfiddle.net/gordianknot/VLmNM/1/ you may click any section for instance)

HTML: 

    <h3><a href="#">Section 1</a></h3>
    <div><p>Section 1 Content</p></div>

    <h3><a href="#">Section 2</a></h3>
    <div><p>Section 2 Content</p></div>

    </div>
    <br/>
    <a id="example" name="example" href="#" class="btn btn-danger">Example Button</a>

JS:

    $(function() {
        $("#accordion").accordion({ 
           collapsible: true, 
            autoHeight: false, 
            active: false 

        });

        $("#example").popover({
         trigger:'manual',
         placement: 'right',
         html: 'true',
         title : 'Test',
         content : 'Hello !',

        });

        $('#example').popover('show');
    });

Upvotes: 1

Views: 1416

Answers (3)

user5259520
user5259520

Reputation: 1

although this is really old and wont be seen, it serves as reference for others with this problem. By changing the trigger to hover it will only open when you hover, but your code means that it opens automatically. Again, this serves as reference to others with this problem and it is a simpler solution.

Upvotes: 0

Farshad
Farshad

Reputation: 1485

Another Solution is binding accordionchange and using top offset of button's current position.

$('#accordion').bind('accordionchange', 
function() {
   var element_height = $( "#example" ).height();
   $('.popover').animate({
            top: $( "#example" ).offset().top - element_height * 2
        } , 250);        
});

look at this Demo Link

Upvotes: 0

Hristo Georgiev
Hristo Georgiev

Reputation: 2519

Perhaps it's not the most elegant solution, but it will do:

JQuery:

var hasMoved = false;
    $('#accordion').click(function () {
        if ($('#accordion').children('h3').hasClass('ui-state-active')) {


            if(!hasMoved) {
            $('.popover').animate({
                top: "+=60"
            }, 250);
              hasMoved = true;  
            }
        } else {
            $('.popover').animate({
                top: "-=60"
            } , 250);
            hasMoved = false; 
        }
    });

});

DEMO

Upvotes: 1

Related Questions