动态调整Popover窗口位置：解决其超出文章Div的显示异常

我看了你的问题，核心问题在于你直接把Popover的位置绑定到了鼠标坐标上，没有做边界约束检测，所以当鼠标在文章边缘时，Popover就会超出父容器的范围啦。咱们可以通过添加边界校验逻辑来解决这个问题：

具体修改思路 #

1. 先获取父容器（.tweets_pane）的位置、宽高，以及Popover自身的尺寸，明确可显示的范围边界
2. 将鼠标的文档坐标转换成相对于父容器的相对坐标，方便后续判断
3. 对Popover的目标位置做边界校验：如果超出容器左/右/上/下边界，就把位置调整到容器的边缘上

修改后的核心代码片段 #

$('.tweets_pane').mouseup(function(event) {
  console.log("Mouse up");
  if (!getRightClick(event)) {
    console.log("Show buttons");
    const $container = $(this);
    const $popover = $('.entity_types');
    
    // 获取容器的位置与尺寸信息
    const containerOffset = $container.offset();
    const containerWidth = $container.width();
    const containerHeight = $container.height();
    
    // 获取Popover自身的尺寸
    const popoverWidth = $popover.width();
    const popoverHeight = $popover.height();
    
    // 计算鼠标在容器内的相对坐标
    const mouseX = event.pageX - containerOffset.left;
    const mouseY = event.pageY - containerOffset.top;
    
    // 初始化Popover目标位置，并做边界约束
    let popoverLeft = mouseX;
    let popoverTop = mouseY;
    
    // 水平方向约束：避免超出容器左右边界
    if (popoverLeft + popoverWidth > containerWidth) {
      popoverLeft = containerWidth - popoverWidth;
    }
    if (popoverLeft < 0) {
      popoverLeft = 0;
    }
    
    // 垂直方向约束：避免超出容器上下边界
    if (popoverTop + popoverHeight > containerHeight) {
      popoverTop = containerHeight - popoverHeight;
    }
    if (popoverTop < 0) {
      popoverTop = 0;
    }
    
    // 设置Popover的显示与位置
    $popover.css({
      display: 'block',
      position: 'absolute',
      left: `${popoverLeft}px`,
      top: `${popoverTop}px`
    });
  }
});

关键注意事项 #

别忘了给父容器.tweets_pane添加position: relative;样式，这样Popover的absolute定位才会相对于父容器生效，而不是整个文档：

.tweets_pane {
  position: relative;
  /* 保留你原有的其他样式 */
}

这样修改后，不管点击文章的哪个边缘区域，Popover都会乖乖约束在文章Div的范围内啦～

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