扩展Bootstrap Popover插件

Question

我正在使用Bootstrap 3的popover js文件，默认情况下，当您悬停/单击弹出式触发器时（我只关心左/右放置），弹出窗口在元素所在的中间垂直对齐。< / p>

请参阅：

但是，无论弹出窗口的高度如何，我都想修改此默认定位。

像这样：

我尝试了以下内容，但由于弹出窗口的高度可能不同，我没有得到我想要的位置，这就像上面的第二张图片。

$('.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类型 - 例如展示位置=='自定义左'和展示位置='自定义右'？

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

Answer 2

theNeoteric有正确的答案。 我还添加了以下内容以对齐弹出箭头。

$.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', '')
}

Answer 3

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

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

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