web-dev-qa-db-ja.com

Bootstrapポップオーバーを配置する方法は？

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

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

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

javascriptcsstwitter-bootstrapcss-positionpopover
52
koichirose

これは動作します。テスト済み。

.popover {
    top: 71px !important;
    left: 379px !important;
}
34
rboarman

ポップオーバーに属性を追加するだけです！急いでいる場合は my JSFiddle を参照してください。

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

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

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

enter image description here

// 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>
17
Mick

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

縮小されたjsまたは縮小されていないjsのいずれかを含めるだけで、同じフォルダーに一致するcss（縮小または縮小されていない）があります。

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

13
dkleehammer

Popoverのビューポート（Bootstrap v3）

特にWebサイトに流動的な幅がある場合、あらゆる状況で機能する最適なソリューションは、Bootstrap Popoverのviewportオプションを使用することです。

これにより、割り当てたセレクター内でポップオーバーが幅を取ります。そのため、トリガーボタンがそのコンテナーの右側にある場合、ポップオーバーがその領域内にある間、bootstrap矢印も右側に表示されます。 jsfiddle.net を参照してください

コンテナのエッジからスペースを取りたい場合は、paddingを使用することもできます。パディングを行わない場合は、viewport： '.container'を使用します

$('#popoverButton').popover({
   container: 'body',
   placement: "bottom",
   html: true,   
   viewport: { selector: '.container', padding: 5 },
   content: '<strong>Hello Wooooooooooooooooooooooorld</strong>'
 });

次のhtmlの例では：

<div class="container">
   <button type="button" id="popoverButton">Click Me!</button>
</div>

cSSを使用する場合：

.container {
  text-align:right;
  width: 100px;
  padding: 20px;
  background: blue;
}

ポップオーバーの境界（ブートストラップv4）

ビューポートと同様に、Bootstrapバージョン4では、popoverは新しいオプションboundaryを導入しました

https://getbootstrap.com/docs/4.1/components/popovers/#options

10
Datsos

bootstrap 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属性を使用します

7
khaled

bootstrap 3.0.0へ：

.popover{ right:0!important; }

そして、変更も

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

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

4
manufosela

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

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;  
    }

これは、他の場所の矢印の場所に拡張できます。

3
siruscoder

ブートストラップソースコード を見ると、マージンを使用して位置を変更できることに気付くでしょう。

そのため、他のポップオーバーと競合しないように、まずポップオーバーテンプレートを変更して独自の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です

1
Buksy

もちろんできます。幸いなことに、それを行うクリーンな方法があり、それはBootstrap popover/tooltipドキュメンテーションにもあります。

let mySpecialTooltip = $('#mySpecialTooltip); 
mySpecialTooltip.tooltip({
 container: 'body',
 placement: 'bottom',
 html: true,
 template: '<div class="tooltip your-custom-class" role="tooltip"><div class="arrow"></div><div class="tooltip-inner"></div></div>'
});

あなたのcssファイルで：-

.your-custom-class {
 bottom: your value;
}

必ず、ブートストラップのツールチップドキュメントにテンプレートを追加し、CSSを使用してカスタムクラス名とスタイルを追加してください。

以上です。これについての詳細は https://getbootstrap.com/docs/4.0/components/tooltips/ で見つけることができます。

1
Nadun Malinda

おそらく、あなたはレスポンシブな振る舞いのためにこのロジックを必要としません。

例えば。

placement: 'auto left'

ブートストラップ3には、placementのauto値があります。 Bootstrap doc ：

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

0
Horacio Alexandre Fernandes