Wie positioniert man ein Bootstrap popover?

Einfach fügen Sie ein Attribut zu Ihrer popover! Sehen mein JSFiddle wenn man in Eile ist.

Den wir hinzufügen möchten, eine ID oder eine Klasse zu einer bestimmten popover, damit wir es anpassen, wie wir wollen via CSS.

Bitte beachten Sie, dass wir nicht anpassen wollen, alle popovers! Dieses ist schreckliche Idee.

Hier ist ein einfaches Beispiel - Anzeige der popover wie diese:

JS:

//We add the id 'my-popover'
$("#my-button").popover({
    html : true,
    placement: 'bottom'
}).data('bs.popover').tip().attr('id', 'my-popover');

CSS:

#my-popover {
    left: -169px!important;
}
#my-popover .arrow {
    left: 90%
}

HTML:

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

Popover ' s Viewport (Bootstrap v3)

Die beste Lösung für Sie zu allen Anlässen, vor allem, wenn Ihre website hat eine fluid Breite, ist die Verwendung der viewport Möglichkeit, die Bootstrap Popover.

Dadurch wird das popover nehmen Breite innen ein Selektor, der Sie zugeordnet haben. Also, wenn die trigger-Taste ist auf der rechten Seite des Containers, die bootstrap-Pfeil wird auch angezeigt, auf der rechten Seite, während die popover ist innerhalb dieses Bereichs.
Sehen jsfiddle.net

Können Sie auch Polsterung wenn Sie möchten, einige Flächen am Rand der container. Wenn Sie möchten, keine Polsterung, nur verwenden viewport: '.container"

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

in der folgenden html-Beispiel:

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

und mit CSS:

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

Popover Grenze (Bootstrap v4)

Ähnlich viewport, in der Bootstrap-version 4, popover wurde die neue option Grenze

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

Bootstrap 3.0.0:

.popover{ right:0!important; }

Und ändern zu

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

WWW, wo ist Ihr richtiger max-width, um zu zeigen, Ihre popover-content.

Wenn man einen Blick auf bootstrap source-codes, Sie werden feststellen, dass die position geändert werden kann, mit margin.

Also, zuerst ändern Sie die popover-Vorlage hinzufügen eigene css-Klasse, um nicht in Konflikt mit anderen popovers:

$(".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>'
});

Dann mit css können Sie einfach verschieben popover position:

.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 */
}

Diese Lösung nicht beeinflussen würde andere popovers, die Sie haben. Gleiche Lösung kann verwendet werden, auf tooltips, da popover-Klasse Erben von der tooltip-Klasse.

Hier ist eine einfache jsFiddle

Vielleicht brauchen Sie nicht, diese Logik für ein responsives Verhalten.

E. g.

placement: 'auto left'

Bootstrap 3 hat auto Wert für Platzierung. Bootstrap-doc:

Wenn "auto" angegeben wird, wird dynamisch neu ausgerichtet wird der tooltip. Zum Beispiel, wenn die Platzierung ist "auto Links", der tooltip wird angezeigt, auf der linken Seite, wenn möglich, sonst wird es dem display direkt.