コンテンツ位置にあるブートストラップポップオーバーの上端または下端の位置を変更します

私はブートストラップv.3.3.7を使用し、動的コンテンツエディタを1つ持っています。そのエディタのすべてのオプションは、ポップオーバーの内部に格納されます。コンテンツ位置にあるブートストラップポップオーバーの上端または下端の位置を変更します

ポップオーバープッシュコンテンツとページ全体が原因で、一部のコンテンツが下部または上部にあるときに問題が発生します。ここでは例です：

ポップオーバーが自動的に位置を変更する余白の外に出た場合、私は一般的に、したいです。ウィンドウの上部から外に出て、ポップオーバーが下部になるか、完全に下部に移動して位置の上部を表示します。

出典

2017-08-24 Ivijan Stefan Stipić

私が正しく理解していない限り、私はあなたが望むものは不可能だと確信しています。ページコンテンツはウィンドウの外に出ることはできません。それは部分的にセキュリティ機能です。たとえば、URLバーの上に物を置くことができれば、本当にそうでなかったときにHTTPSを持っているように見えるようにすることができます。 –

あなたは"auto"が指定されている場合、それは動的にポップオーバーを再配向ますdata-placement="auto"

を使用することができます。

たとえば、プレースメントが"auto left"の場合、可能であればポップオーバーは左にと表示され、そうでない場合は右に表示されます。位置絶対にあなたのためのトリックを行います作る

$(function() { 
 
    $('[data-toggle="popover"]').popover() 
 
})

.flex { 
 
    display: flex; 
 
    height: 50vh; 
 
    justify-content: space-between; 
 
    align-items: flex-start; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> 
 

 

 

 
<div class="flex"> 
 
    <button type="button" class="btn btn-default" data-container="body" data-toggle="popover" data-placement="auto" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus."> 
 
    Popover Auto position 
 
</button> 
 
    <button type="button" class="btn btn-default" data-container="body" data-toggle="popover" data-placement="auto" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus."> 
 
    Popover Auto position 
 
</button> 
 

 
</div> 
 

 
<div class="flex" style="align-items: flex-end;"> 
 
    <button type="button" class="btn btn-default" data-container="body" data-toggle="popover" data-placement="auto" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus."> 
 
    Popover Auto position 
 
</button> 
 
    <button type="button" class="btn btn-default" data-container="body" data-toggle="popover" data-placement="auto" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus."> 
 
    Popover Auto position 
 
</button> 
 
</div>

出典

2017-09-07 05:22:54