Popover无法正常显示？hover时显示不全被屏幕遮挡求解决方案

我来帮你搞定这个Popover显示不全的问题～你遇到的情况是因为Popover默认会严格按照你指定的left方向定位，当元素靠近屏幕边缘时，就会超出视口范围被遮挡。下面给你几个实用的解决方案：

方案1：使用viewport选项让Popover自动适配视口 #

Bootstrap的Popover提供了viewport配置项，可以让它在指定的范围内自动调整位置，避免超出屏幕边缘。你只需要在初始化代码里添加这个配置：

$(function() {
  $('.wrapper2').popover({
    selector: '.my-tip2',
    trigger: 'hover',
    viewport: { selector: 'body', padding: 10 } // 让Popover在body范围内，预留10px间距
  });
});

这个配置会让Popover在视口空间不足时，自动切换到合适的方向显示，不会再被边缘截断。

方案2：使用auto placement自动切换方向 #

你可以把data-placement的值改成auto left，这样Popover会优先尝试向左显示，如果左侧空间不够，就自动切换到其他合适的方向（比如右侧）：
修改你的HTML：

<div class="wrapper2">
  <div class="tips my-tip2" data-placement="auto left" data-content="Second Popover content">
    Second Div Content
  </div>
</div>

或者在JS初始化时直接设置：

$(function() {
  $('.wrapper2').popover({
    selector: '.my-tip2',
    trigger: 'hover',
    placement: 'auto left'
  });
});

方案3：检查父容器的overflow属性并调整Popover容器 #

如果你的.wrapper2或者它的父元素设置了overflow: hidden，也会导致Popover被父容器截断。这种情况下，你可以把Popover的挂载容器改成body，让它脱离父容器的限制：

$(function() {
  $('.wrapper2').popover({
    selector: '.my-tip2',
    trigger: 'hover',
    container: 'body' // 将Popover插入到body元素下
  });
});

同时记得检查父元素的样式，移除不必要的overflow: hidden设置。

你可以根据自己的场景选择其中一种方案，一般方案1或2就能解决大部分边缘遮挡的问题啦～

内容的提问来源于stack exchange，提问作者Gokul Kumar