javascript - 扩展 Bootstrap Popover 插件

Question

我正在使用 Bootstrap 3 的 popover js 文件，默认情况下，当您悬停/单击 popover 触发器时(我只关心左/右位置)，popover 在元素所在的中间垂直对齐。

看这个:

但是，无论弹出框的高度如何，我都想修改这个默认定位。

像这样:

我尝试了以下方法，但是因为弹出窗口的高度可能不同，所以我没有准确地到达我想要的位置，就像上面的第二张图片一样。

$('.trigger').popover({
   trigger: 'hover',
   container: 'body'
}).hover(function(){
   var off = $('.popover').offset(),
       delta = 50,
       newY = parseInt( off.top ) + delta + 'px';

   $('.popover').css({top: newY });
});

有什么帮助吗？

编辑:有没有办法扩展 Bootstrap 工具提示 js？我最终不得不通过更改 Tooltip.prototype.getCalculatedOffset 函数来更改源代码。我所做的只是更改左/右位置以不减去 actualHeight

Tooltip.prototype.getCalculatedOffset = function (placement, pos, actualWidth, actualHeight) {
    // return placement == 'bottom' ? { top: pos.top + pos.height,   left: pos.left + pos.width / 2 - actualWidth / 2  } :
    //        placement == 'top'    ? { top: pos.top - actualHeight, left: pos.left + pos.width / 2 - actualWidth / 2  } :
    //        placement == 'left'   ? { top: pos.top + pos.height / 2 - actualHeight / 2, left: pos.left - actualWidth } :
    //     /* placement == 'right' */ { top: pos.top + pos.height / 2 - actualHeight / 2, left: pos.left + pos.width   }

    return placement == 'bottom' ? { top: pos.top + pos.height,   left: pos.left + pos.width / 2 - actualWidth / 2  } :
       placement == 'top'    ? { top: pos.top - actualHeight, left: pos.left + pos.width / 2 - actualWidth / 2  } :
       placement == 'left'   ? { top: pos.top + pos.height / 2, left: pos.left - actualWidth } :
       /* placement == 'right' */ { top: pos.top + pos.height / 2, left: pos.left + pos.width   }
  }

有没有一种方法可以创建我自己的 placement 类型 - 比如 placement == 'custom-left' 和 placement = 'custom-right' ??

Answer 1

这对我有用(对于弹出窗口，而不是工具提示)

$.fn.popover.Constructor.prototype.getCalculatedOffset = function (placement, pos, actualWidth, actualHeight) {
    return  placement == 'bottom'? { top: pos.top + pos.height, left: pos.left + pos.width / 2 - actualWidth / 2 }:
            placement == 'top'? { top: pos.top - actualHeight, left: pos.left + pos.width / 2 -actualWidth / 2 }:
            placement == 'left'? { top: pos.top + pos.height / 2, left: pos.left - actualWidth }:
            { top: pos.top + pos.height / 2, left: pos.left + pos.width };
};