Javascript Twitter引导popover的动态放置

我正在尝试为引导式弹出框创建一个动态置换函数，这样，如果内容太大，无法在屏幕上以“底部”位置显示，而没有垂直滚动，它将以“顶部”位置向上显示弹出框

为此，我创建了一个函数：

function popoverPlacement(popoverHeight, element) {
    var offset = element.offset().top;
    var height = popoverHeight;
    var docheight = $(document).height();

    if (offset + height >= docheight) {
        return "top";
    }
    else {
        return "bottom"
    }
}

不幸的是，我需要将popoverHeight指定为硬编码的值，因为内容是为popover生成的，而不是添加到DOM中，所以我无法获得它的高度

这就是它的使用方式：

$(this).popover({
            placement: function () { return popoverPlacement(270, this.$element); },
            title: "Status",
            trigger: "click",
            content: editStatusContent,
            html: true,
            delay: {
                show: 1,
                hide: 1
            },
            animation: false
        });

有没有一种动态的方法来实现这一点

---

谢谢

您可以通过将内容作为不可见节点附加到文档中来测量您的popover，如下所示：

var tpl = this.options.template;
var $inner_el = $(this.options.content).clone(false);
var $measure_el = $('.popover-content', tpl).append($inner_el)
                                            .parents('.popover');
$measure_el.css({
    visibility: 'hidden',
    position:   'absolute'
});

$measure_el.appendTo('body');
actual_height = $measure_el.height();
actual_width = $measure_el.width();
$measure_el.remove();

---

我发现，在显示工具提示后，可以使用绝对定位：

$('#liveCallData').tooltip('show');
var tooltip = $('#liveCallData .tooltip');
width = tooltip.width();

要定位它：

tooltip.css({'position': 'absolute', top: y - 41, left: x - (width / 2) - 1});