56

960px幅のWebページの右上隅にあるトリガーのBootstrapポップオーバーを配置しようとしています。

理想的には、それを下に配置し、CSSで矢印を移動します（したがって、矢印はポップオーバーの右上にあります）。残念ながら、「配置」：「下部」の配置では、トリガーの下の中央に配置されるため、十分ではありません。

ポップオーバーをトリガーの下と左側に静的に配置するソリューションを探しています。

4

10 に答える 10

34

これは機能します。テスト済み。

.popover {
    top: 71px !important;
    left: 379px !important;
}
于 2012-09-18T23:03:52.373 に答える
20

ポップオーバーに属性を追加するだけです! お急ぎの場合は、私の JSFiddleをご覧ください。

特定のポップオーバーに ID またはクラスを追加して、CSS を介して好きなようにカスタマイズできるようにします。

すべてのポップオーバーをカスタマイズしたくないことに注意してください! これはひどい考えです。

簡単な例を次に示します。ポップオーバーを次のように表示します。

ここに画像の説明を入力

// We add the id 'my-popover'
$("#my-button").popover({
    html : true,
    placement: 'bottom'
}).data('bs.popover').tip().attr('id', 'my-popover');
#my-popover {
    left: -169px!important;
}
#my-popover .arrow {
    left: 90%
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>

<button id="my-button" data-toggle="popover">My Button</button>

于 2015-09-15T01:22:51.877 に答える
14

topLeft、topRight、bottomLeft、bottomRight の 4 つの追加配置を提供する jQuery プラグインを作成しました。

縮小された js または縮小されていない js のいずれかを含め、一致する css (縮小されたものと縮小されていないもの) を同じフォルダーに入れるだけです。

https://github.com/dkleehammer/bootstrap-popover-extra-placements

于 2013-03-13T21:34:20.567 に答える
7

ブートストラップ css ライブラリに数行のコードを追加することで、これを (部分的に) 解決しました。tooltip.js、tooltip.less、popover.js、および popover.less を変更する必要があります。

tooltip.js で、switch ステートメントにこのケースを追加します。

case 'bottom-right':
          tp = {top: pos.top + pos.height, left: pos.left + pos.width}
          break

tooltip.less で、次の 2 行を .tooltip{} に追加します。

&.bottom-right { margin-top:   -2px; }
&.bottom-right .tooltip-arrow { #popoverArrow > .bottom(); }

popover.js と popover.less で同じことを行います。基本的に、他の位置が言及されているコードを見つけた場合は、それに応じて目的の位置を追加してください。

先に述べたように、これは問題を部分的に解決しました。私の問題は、ポップオーバーの小さな矢印が表示されないことです。

注:ポップオーバーを左上に配置する場合は、'.top' の top 属性と '.left' の left 属性を使用します。

于 2012-08-18T10:15:51.887 に答える
4

3.0.0 をブートストラップするには:

.popover{ right:0!important; }

そして改造も

.popover { max-width:WWWpx!important; }

WWW は、ポップオーバー コンテンツを表示するための正しい最大幅です。

于 2013-08-26T09:30:09.697 に答える
3

ポップオーバーがオーバーラップして下に配置され、矢印が正しく表示されるように、次の変更を加える必要がありました。

js 

case 'bottom-right':  
    tp = {top: pos.top + pos.height + 10, left: pos.left + pos.width - 40}  
    break

CSS 

    .popover.bottom-right .arrow {  
      left: 20px; /* MODIFIED */  
      margin-left: -11px;  
      border-top-width: 0;  
      border-bottom-color: #999;  
      border-bottom-color: rgba(0, 0, 0, 0.25);  
      top: -11px;  
    }  
    .popover.bottom-right .arrow:after {  
      top: 1px;  
      margin-left: -10px;  
      border-top-width: 0;  
      border-bottom-color: #ffffff;  
    }

これは、他の場所の矢印の位置に拡張できます..お楽しみください!

于 2013-01-22T21:11:05.140 に答える
1

ブートストラップのソース コードを見ると、マージンを使用して位置を変更できることがわかります。

したがって、最初にポップオーバー テンプレートを変更して独自の css クラスを追加し、他のポップオーバーと競合しないようにする必要があります。

$(".trigger").popover({
  html: true,
  placement: 'bottom',
  trigger: 'click',
  template: '<div class="popover popover--topright" role="tooltip"><div class="arrow"></div><h3 class="popover-title"></h3><div class="popover-content"></div></div>'
});

次に、css を使用して、ポップオーバーの位置を簡単にシフトできます。

.popover.popover--topright {
  /* margin-top: 0px; // Use to change vertical position */
  margin-right: 40px; /* Use to change horizontal position */
}
.popover.popover--topright .arrow {
  left: 88% !important; /* fix arrow position */
}

この解決策は、あなたが持っている他のポップオーバーには影響しません。ポップオーバー クラスはツールチップ クラスを継承するため、ツールチップでも同じソリューションを使用できます。

これは単純なjsFiddleです

于 2016-05-06T07:09:51.843 に答える
0

応答性の高い動作には、このロジックは必要ないかもしれません。

例えば

placement: 'auto left'

Bootstrap 3 には、配置の自動値があります。ブートストラップ ドキュメント:

「auto」を指定すると、ツールチップの向きが動的に変更されます。たとえば、配置が「自動左」の場合、ツールチップは可能な場合は左に表示され、そうでない場合は右に表示されます。

于 2015-08-18T22:37:32.520 に答える