0

ブートストラップ ポップオーバーの動的ディスプレイスメント関数を作成しようとしています。コンテンツが大きすぎて垂直スクロールなしで「下」配置で画面に表示できない場合、「上」配置でポップオーバーが上向きに表示されます。

このために、関数を作成しました：

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 をハードコーディングされた値として指定する必要があります。これは、コンテンツがポップオーバー用に生成され、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
        });

これを達成する動的な方法はありますか？

ありがとう

4

2 に答える 2

1

次のように、ポップオーバーを非表示ノードとしてドキュメントにコンテンツとともに追加することで、ポップオーバーを測定できます。

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();
于 2013-02-28T14:17:08.383 に答える
0

ツールチップを表示した後、絶対配置を使用できることがわかりました。

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

配置するには:

tooltip.css({'position': 'absolute', top: y - 41, left: x - (width / 2) - 1});
于 2013-04-24T18:34:06.613 に答える