1. ホーム
  2. jquery

[解決済み] Bootstrapのポップオーバーの位置を、ウィンドウの端に対するポップオーバーのXの位置に基づいて変更する?

2023-05-31 21:07:04

質問

私はインターネットをくまなく調べ、このstackoverflowの投稿が洞察に満ちたものであることを知りました。 画面の幅に基づいて Bootstrap のポップオーバーの位置を変更することは可能ですか? を見つけましたが、それはまだ私の質問に答えておらず、おそらく私が位置/オフセットを理解するのに苦労したためです。

私がやろうとしていることは、以下のとおりです。ホットスポットのポップオーバーがビューポートを越えて配置されない限り、Twitter Bootstap ポップオーバーの位置を右側にしたいのですが、左側にしたいのです。ホットスポットを押すと情報が表示されますが、水平スクロールがロックされているときにビューポートの外側に表示されないようにしたいのです。

こんな感じかなと思っています。

$('.infopoint').popover({
        trigger:'hover',
        animation: false,
        placement: wheretoplace 
    });
    function wheretoplace(){
        var myLeft = $(this).offset.left;

        if (myLeft<500) return 'left';
        return 'right';
    }

感想は?ありがとうございます。

どのように解決するのですか?

今気づいたのですが 配置 オプションは 文字列 または 文字列を返す関数 を返す関数で、ポップオーバー可能なリンクをクリックするたびに計算されます。

これによって、最初の $.each 関数がなくても再現できます。

var options = {
    placement: function (context, source) {
        var position = $(source).position();

        if (position.left > 515) {
            return "left";
        }

        if (position.left < 515) {
            return "right";
        }

        if (position.top < 110){
            return "bottom";
        }

        return "top";
    }
    , trigger: "click"
};
$(".infopoint").popover(options);