bootstrap popover: positionnement avancé

Question

Je suis en train de les positionner un twitter bootstrap liste pour un trigger qui se trouve à l'extrême coin en haut à droite de 960px de large page web. Idéalement, j'aimerais position sur le fond et déplacez la flèche avec CSS (de sorte que la flèche est sur le haut à droite de la liste).

Malheureusement, le 'placement':'bas' de positionnement n'est pas suffisant, car il centre au-dessous du déclencheur.

Je suis à la recherche d'une solution qui sera la place de la liste de manière statique ci-dessous et à gauche de la gâchette. J'ai lu des tonnes de questions, mais ne pouvait pas trouver.

Conseils?

Answer 1

Cela marche. Testé.

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

Answer 2

J'ai créé un plugin jQuery qui fournit 4 emplacements supplémentaires: topLeft, topRight, bottomLeft, bottomRight

Vous ne faites qu'inclure soit le js minifié, soit le js non mininé et vous avez les fichiers css correspondants (minifiés ou non minés) dans le même dossier.

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

Answer 3

J'ai résolu ce problème (partiellement) par l'ajout de quelques lignes de code pour le bootstrap css de la bibliothèque. Vous aurez à modifier tooltip.js, d'info-bulle.moins, popover.js et liste.moins

dans tooltip.js, ajoutez ce cas, dans l'instruction switch il y

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 dans popover.js et liste.de moins en moins. En gros, partout où vous trouvez le code là où les autres postes sont mentionnés, ajouter votre position souhaitée en conséquence.

Comme je l'ai mentionné plus tôt, cela a résolu le problème en partie. Mon problème maintenant est que la petite flèche de la liste ne s'affiche pas.

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

Answer 4

Pour amorcer 3.0.0:

 .popover{ right:0!important; }
 

Et modifier aussi

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

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

Answer 5

Je devais faire les changements suivants pour que le popover se positionne en dessous avec quelques chevauchements et pour afficher 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 pour les emplacements de flèche ailleurs .. profitez-en!