Javascript 扩展Bootstrap Popover插件 我使用Bootstrap 3的PopOver JS文件，默认情况下，当你悬停/点击PopFor触发器（我只关心左/右放置）时，PopOver在元素所在的中间垂直对齐。

见此：

但是，我想修改此默认位置，而不考虑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 });
});

有什么帮助吗

编辑：有没有办法扩展引导工具提示js？最后，我不得不通过更改

Tooltip.prototype.getCalculatedOffset

函数来更改源代码。我所做的只是将左/右位置更改为不减去

实际高度

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   }
  }

有没有一种方法可以让我创建自己的

布局

类似类型的布局=='custom left'和placement='custom right'？

也许这会有帮助？（未经测试）。简而言之：等待“显示”事件触发和设置位置

$('.popover').on('shown.bs.popover', function () {
  var off = $(this).offset(),
       delta = 50,
       newY = parseInt( off.top ) + delta + 'px';

   $(this).css({top: newY });
})

这对我来说是个好办法（对于流行音乐，而不是toolips）

---

《经济学人》给出了正确的答案。 我还添加了以下内容来顶部对齐弹出箭头

$.fn.popover.Constructor.prototype.replaceArrow = function (delta, dimension, isHorizontal) {
    var intOffset = 32;
    if (delta != 0) { intOffset = intOffset - (delta / 2) } ;
    this.arrow()
    .css(isHorizontal ? 'left' : 'top', intOffset + 'px')
    .css(isHorizontal ? 'top' : 'left', '')
}

---

刚试过。这会导致闪烁。弹出框明显地“跳”到了正确的位置。因为它是在视图已经显示之后触发的。玩具可以尝试使用事件“show.bs.popover”，隐藏元素并在显示的位置上更改位置并显示它。我认为当启动“show.bs.popover”时，它将不起作用，因为视图尚未就绪，$（this）.offset（）将返回0。不确定是否还有其他方法。我唯一要做的就是修改实际的引导js源代码。我需要从

Tooltip.prototype.getCalculatedOffset

函数中更改顶部/左侧位置。我需要找到一种方法来扩展它，而不是修改实际的源代码。

$.fn.popover.Constructor.prototype.replaceArrow = function (delta, dimension, isHorizontal) {
    var intOffset = 32;
    if (delta != 0) { intOffset = intOffset - (delta / 2) } ;
    this.arrow()
    .css(isHorizontal ? 'left' : 'top', intOffset + 'px')
    .css(isHorizontal ? 'top' : 'left', '')
}