Une Solution Simple

il suffit D'ajouter un attribut à votre popover buddy!

Tripoter

Voir mon violon si vous êtes pressé

But Principal

nous voulons ajouter un ID ou une classe à un popover particulier afin de pouvoir le personnaliser comme nous le voulons via CSS.

veuillez noter que nous ne voulons pas personnaliser tous les popovers! C'est une idée terrible (essentiellement, à partir de aujourd'hui, la réponse acceptée est une idée TERRIBLE..)

Exemple

voici un exemple simple-afficher le popover comme ceci:

html:

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

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

j'ai créé un plugin jQuery qui fournit 4 placements supplémentaires: topLeft, haut, bottomLeft, bottomRight

vous n'incluez que les js minifies ou les js Non minifies et vous avez le CSS correspondant (minified vs unminified) dans le même dossier.

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

Liste de la Fenêtre d'affichage

la meilleure solution qui fonctionnera pour vous dans toutes les occasions, surtout si votre site Web a une largeur fluide, est d'utiliser le fenêtre option du Popover Bootstrap.

ceci fera que le popover prendra la largeur à l'intérieur d'un sélecteur que vous avez assigné. Donc si le bouton de déclenchement est à droite de ce conteneur, la flèche bootstrap apparaîtra également à droite pendant que le popover est à l'intérieur de cette zone. Voir jsfiddle.net

vous pouvez aussi utiliser rembourrage si vous voulez de l'espace entre le bord du récipient. Si vous ne voulez pas de rembourrage, utilisez fenêtre: '.conteneur'

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

dans l'exemple html suivant:

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

et avec CSS:

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

j'ai résolu ce problème (en partie) en ajoutant quelques lignes de code à la bibliothèque CSS de bootstrap. Vous devrez modifier tooltip.js, d'info-bulle.moins de, liste.js, et liste.moins

dans l'info-bulle.js, Ajoute ce cas dans la déclaration switch ici

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

dans l'info-bulle.moins, ajoutez ces deux lignes .infobulle{}

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

faire la même chose à popover.js et liste.peu. Fondamentalement, partout où vous trouvez du code où d'autres positions sont mentionnées, ajoutez votre position désirée conséquent.

remarque: si vous voulez avoir la liste en haut à gauche, utiliser l'attribut".haut et à gauche de l'attribut de '.de gauche'

bootstrap 3.0.0:

.popover{ right:0!important; }

Et modifier trop

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

où WWW est votre largeur max correcte pour afficher votre contenu popover.

j'ai dû faire les changements suivants pour le popover à la position ci-dessous avec un certain chevauchement et pour montrer la flèche correctement.

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

cela peut être étendu à d'autres emplacements de flèches .. profitez-en!

Peut-être que vous n'avez pas besoin de cette logique d'un comportement réactif.

E. G.

placement: 'auto left'

Bootstrap 3 a auto valeur stage. Bootstrap doc:

quand "auto" est spécifié, il redirigera dynamiquement le tooltip. Par exemple, si le placement est "auto left", le tooltip s'affichera à gauche lorsque c'est possible, sinon il s'affichera à droite.

Si vous prenez un coup d'oeil à bootstrap codes sources, vous remarquerez que la position peut être modifiée en utilisant la marge.

donc, vous devez d'abord changer le modèle de popover pour ajouter votre propre classe css pour ne pas entrer en conflit avec d'autres 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>'
});

alors en utilisant css vous pouvez facilement changer la position de popover:

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

Cette solution n'influencerait pas les autres popovers que vous avez. La même solution peut être utilisée sur le bout des outils aussi bien parce que la classe popover hériter de la classe tooltip.

voici un jsFiddle simple