时间戳

首页 > 解决方案 > 在 Boostrap 4 Popover 中禁用翻转

javascript - 在 Boostrap 4 Popover 中禁用翻转

问题描述

我希望弹出框始终保持在同一位置并且在滚动时不会改变： 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');

图片

我正在使用 Bootstrap 4.1.3，我看到 Popover 扩展了 Tooltip： https ://github.com/twbs/bootstrap/blob/v4-dev/js/src/popover.js#L70

这里是工具提示代码： https ://github.com/twbs/bootstrap/blob/v4-dev/js/src/tooltip.js

标签： javascriptjquerybootstrap-4bootstrap-popoverpopper.js

解决方案

您应该添加另一个选项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
};

它将该值传递给flip.behavior（查看更多）。

请参阅工作示例：https ://jsfiddle.net/aq9Laaew/251047/

推荐阅读