上一篇: jquery – IE9“没有传输”错误,... 下一篇:在jQuery serialize()或serializ...

jquery – 在内容位置更改bootstrap popover的顶部或底部位置

jQuery 发布时间：2022-03-30 发布网站：大佬教程 code.js-code.com

大佬教程收集整理的这篇文章主要介绍了jquery – 在内容位置更改bootstrap popover的顶部或底部位置，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。

我使用Bootstrap v.3.3.7并拥有一个动态内容编辑器.该编辑器的所有选项都存储在popover中.

由于popover推送内容和整个页面,当一些内容位于底部或顶部时,我遇到问题.以下是示例：

我一般都想要,如果popover超出边距以自动改变位置.它从窗口的顶部向外突出到底部或者如果完全在底部以显示位置顶部.

解决方法

你可以使用 data-placement="auto"

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

.flex {
  display: flex;
  height: 50vh;
  justify-content: space-between;
  align-items: flex-start;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />



<div class="flex">
  <button type="button" class="btn btn-default" data-container="body" data-toggle="popover" data-placement="auto" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
  Popover Auto position
</button>
  <button type="button" class="btn btn-default" data-container="body" data-toggle="popover" data-placement="auto" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
  Popover Auto position
</button>

</div>

<div class="flex" style="align-items: flex-end;">
  <button type="button" class="btn btn-default" data-container="body" data-toggle="popover" data-placement="auto" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
  Popover Auto position
</button>
  <button type="button" class="btn btn-default" data-container="body" data-toggle="popover" data-placement="auto" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
  Popover Auto position
</button>
</div>