3

I would like the popover to always stick on the same position and doesn't change when scrolling: https://jsfiddle.net/eloyrubio/aq9Laaew/251011/ 

 var options = {
  placement: 'top',
  title: 'I should be on top',
  content: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque lobortis nisl et metus varius lobortis. Sed sit amet posuere velit. Curabitur vel blandit mauris, a rutrum ante. Praesent sit amet orci viverra arcu sodales posuere.',
  html: false
};

$('#po1').popover(options).popover('show');

image

I am using Bootstrap 4.1.3 and I saw that Popover extends Tooltip: https://github.com/twbs/bootstrap/blob/v4-dev/js/src/popover.js#L70

And here is the Tooltip code: https://github.com/twbs/bootstrap/blob/v4-dev/js/src/tooltip.js

eloyrubio
  • 43
  • 4

1 Answers1

2

You should add another option of fallbackPlacement:

var options = {
  placement: 'top',
  fallbackPlacement: ['top'],
  flip: 'top',
  title: 'I should be on top',
  content: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque lobortis nisl et metus varius lobortis. Sed sit amet posuere velit. Curabitur vel blandit mauris, a rutrum ante. Praesent sit amet orci viverra arcu sodales posuere.',
  html: false
};

It passes that value to flip.behavior (see more).

See working example: https://jsfiddle.net/aq9Laaew/251047/

falinsky
  • 7,229
  • 3
  • 32
  • 56
  • Thank you @falinsky . Is there a way to partially hide the popover instead of overlapping the button: https://jsfiddle.net/eloyrubio/aq9Laaew/251494/ ? – eloyrubio Oct 17 '18 at 18:27
  • Thanks mate, helped me a lot. took me a while to find but now that i am here ;) – Sagive Feb 15 '19 at 00:43