0

That should be an easy question for Bootstrap experienced users :)

I want to have a popover on div element and have the popover affixed.

The goal is: when the users scrolls down, if the popover goes out of the screen, it gets a "position: fixed" or something like that.

This is the best I could do:

$('.start').click(function (event) {
    $(this).popover({
        placement: 'top',
        html: true,
        content: '<div id="popover-id">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas hendrerit auctor neque eu elementum.</div>',
        title: 'Popover',
        container: '.container'
    }).popover('show');
    $('#popover-id').parent().parent().affix({
        offset: {
            top: 175
        }
    });
});

See the fiddle: http://jsfiddle.net/fx53fvwf/1/

The problem is a sort of conflict between

  • Popover that inserts a 'top: xxx px'
  • Affix that inserts a 'position: fixed' when scrolling down
Siguza
  • 21,155
  • 6
  • 52
  • 89
Réjôme
  • 1,474
  • 3
  • 16
  • 25

1 Answers1

1

To solve the conflict, you have to prioritize the affix top position thanks to !important keyword as following:

.affix {
    top: 15px !important;
}

See updated fiddle: http://jsfiddle.net/fx53fvwf/4/

Enjoy ! ^^

Danh
  • 96
  • 4